詳解java 中Spring jsonp 跨域請(qǐng)求的實(shí)例
jsonp介紹
JSONP(JSON with Padding)是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。由于同源策略，一般來說位于 server1.example.com 的網(wǎng)頁無法與不是 server1.example.com的服務(wù)器溝通，而 HTML 的<script> 元素是一個(gè)例外。利用 <script> 元素的這個(gè)開放策略，網(wǎng)頁可以得到從其他來源動(dòng)態(tài)產(chǎn)生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執(zhí)行而不是用 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請(qǐng)求攔截的參數(shù)名，如果攔截成功會(huì)將返回?cái)?shù)據(jù)傳入函數(shù)執(zhí)行回調(diào)函數(shù)*/ } } |
2、創(chuàng)建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; @RestControllerpublic 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、創(chuàng)建啟動(dòng)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、前端調(diào)用：
|
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跨域?qū)嵗?lt;/title> <!-- jquery版本可以不是3.2.1版本的 --> <script type="text/javascript" src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function() { /* 這是快捷調(diào)用，callback 是advice中設(shè)置的，?是保留參數(shù)， jquery會(huì)替換掉這個(gè)問號(hào) url可是不同于請(qǐng)求地址的任何url*/ $.getJSON("/hello?callback=?", function(data) { //$("#showcontent").text("Result:" + data) }); /*使用ajax方法調(diào)用*/ $.ajax({ type : "get", async : false, url : "/hello", dataType : "jsonp",//數(shù)據(jù)類型為jsonp data:{a:"b",d:"c"}, type:"POST", jsonp : "callback",//服務(wù)端用于接收callback調(diào)用的function名的參數(shù) success : function(data) { $("#showcontent").text("Result:" + data.suc + " requestParam:" + data.param ) }, error : function() { alert('fail'); } }); }) </script> </head> <body> <div id="showcontent"></div> </body> </html> |
服務(wù)器端也不一定要用spring 任何技術(shù)都可以，只要返回格式是下面的格式就可以，調(diào)用一個(gè)哈桑農(nóng)戶，出傳入一個(gè)json或者是字符串就可以了。
|
1
|
/**/test01({"suc":true,"msg":"save suc"}); |
直接訪問返回?cái)?shù)據(jù)：
以上使用關(guān)于java 中Spring jsonp 跨域請(qǐng)求的實(shí)例詳解，如有疑問請(qǐng)留言或者到本站社區(qū)交流討論， 感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
原文鏈接：http://hpgary.iteye.com/blog/2389640
