jsonp介紹
JSONP(JSON with Padding)是JSON的一種“使用模式”,可用于解決主流瀏覽器的跨域數據訪問的問題。由于同源策略,一般來說位于 server1.example.com 的網頁無法與不是 server1.example.com的服務器溝通,而 HTML 的<script> 元素是一個例外。利用 <script> 元素的這個開放策略,網頁可以得到從其他來源動態產生的 JSON 資料,而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON,而是任意的JavaScript,用 JavaScript 直譯器執行而不是用 JSON 解析器解。
0、引入jar包
1
2
3
4
5
6
7
8
9
10
|
< dependency > < groupId >org.springframework.boot</ groupId > < artifactId >spring-boot-starter-jersey</ artifactId > </ dependency > < dependency > < groupId >org.springframework.boot</ groupId > < artifactId >spring-boot-starter-web</ artifactId > </ dependency > |
其他介紹就不多說了,開始上手吧。
1、繼承AbstractJsonpResponseBodyAdvice類JsonpAdvice,并加上@RestControllerAdvice注解
1
2
3
4
5
6
7
8
9
10
|
/*RestControllerAdvice的值指定攔截的包名*/ @RestControllerAdvice("com.ctrl") public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice { public JsonpAdvice() { super("callback", "jsonp"); /*callback是url請求攔截的參數名,如果攔截成功會將返回數據傳入函數執行回調函數*/ } } |
2、創建ctrl類
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
package com.ctrl; import java.util.HashMap; import java.util.Map; import javax.servlet.http.HttpServletRequest; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController public class HelloCtrl { @RequestMapping ( "/hello" ) public Map<String,Object> hello(HttpServletRequest request){ Map<String,Object>data = new HashMap<String,Object>(); data.put( "suc" , true ); data.put( "msg" , "save suc" ); data.put( "param" , request.getParameter( "a" ) + "==" + request.getParameter( "d" )); return data ; } } |
4、創建啟動app類:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
package com.services; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication (scanBasePackages= "com" ) public class App { public static void main(String[] args) { SpringApplication.run(App. class , args); } } |
5、前端調用:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html> <html> <head> <title>jquery跨域實例</title> <!-- jquery版本可以不是 3.2 . 1 版本的 --> <script type= "text/javascript" src= "jquery-3.2.1.js" ></script> <script type= "text/javascript" > $(function() { /* 這是快捷調用,callback 是advice中設置的,?是保留參數, jquery會替換掉這個問號 url可是不同于請求地址的任何url*/ $.getJSON("/hello?callback=?", function(data) { //$("#showcontent").text("Result:" + data) }); /*使用ajax方法調用*/ $.ajax({ type : "get" , async : false , url : "/hello" , dataType : "jsonp" , //數據類型為jsonp data:{a: "b" ,d: "c" }, type: "POST" , jsonp : "callback" , //服務端用于接收callback調用的function名的參數 success : function(data) { $( "#showcontent" ).text( "Result:" + data.suc + " requestParam:" + data.param ) }, error : function() { alert( 'fail' ); } }); }) </script> </head> <body> <div id= "showcontent" ></div> </body> </html> |
服務器端也不一定要用spring 任何技術都可以,只要返回格式是下面的格式就可以,調用一個哈桑農戶,出傳入一個json或者是字符串就可以了。
1
|
/**/ test01({ "suc" : true , "msg" : "save suc" }); |
直接訪問返回數據:
以上使用關于java 中Spring jsonp 跨域請求的實例詳解,如有疑問請留言或者到本站社區交流討論, 感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
原文鏈接:http://hpgary.iteye.com/blog/2389640