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