Jquery JsonP request to cross domain | Springboot RestAPI & BootStrap

In the past posts, we had experiences with AngularJs CrossSite HTTP Requests and AngularJs JsonP. In the tutorial, JavaSampleApproach will show you how to use JQuery JsonP Request without worrying about cross-domain issues.

Related posts:
JQuery uses Bootstrap Table to display data from SpringBoot RestAPI
AngularJs CrossSite HTTP Requests to SpringBoot RestAPIs
AngularJs JsonP request to cross domain | Springboot RestAPI & BootStrap

I. Technologies

– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– AngularJS
– Bootstrap
– Spring Boot – 1.5.7.RELEASE

II. Jquery JsonP and SpringBoot

JSONP is a solution to resolve cross-domain issues which uses script tag instead XMLHttpRequest object.
With JQuery, we can use it as below:

To support JSON-P with SpringBoot RestAPI, we use AbstractJsonpResponseBodyAdvice:

Returned result is a Javascript object, NOT Json:

Jquery JsonP request to cross domain - Springboot RestAPI & BootStrap - results previews

III. Practice

We create 2 SpringBoot projects as below:

Jquery JsonP request to cross domain - Springboot RestAPI & BootStrap - projects

Steps to do:

– Implement AngularJs Front-end

  • Create SpringBoot project
  • Create Web Controller
  • Create index.html file
  • Implement Jquery Ajax

– Implement SpringBoot Backend

  • Create SpringBoot project
  • Create data models
  • Implement RestApi
  • Configure JsonpResponse advice

– Run and check results

1. Implement AngularJs Front-end
1.1 Create SpringBoot project

Use SpringToolSuite to create a SpringBoot project SpringBootJQueryJsonp with dependencies:

1.2 Create Web Controller

1.3 Create index.html file

1.4 Implement Jquery Ajax

2. Implement SpringBoot Backend
2.1 Create SpringBoot project

Use SpringToolSuite to create a SpringBoot project SpringBootJsonPRestAPI with dependency:

2.2 Create data models

– Create Address model:

– Create Customer model:

2.3 Implement RestApi

2.4 Configure JsonpResponse advice

3. Run and check results

Run 2 above SpringBoot projects. -> Results:

Jquery JsonP request to cross domain - Springboot RestAPI & BootStrap - results

Jquery JsonP request to cross domain - Springboot RestAPI & BootStrap - results - headers

Jquery JsonP request to cross domain - Springboot RestAPI & BootStrap - results previews

IV. Sourcecode

SpringBootJqueryJsonp
SpringBootJsonpRestAPI

By grokonez | November 7, 2017.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*