最近前端有个需要跨域访问的需求,需要后端实现对jsonp的支持。在经过多方的资料查找后,最终实现了对jsonp的支持。现贴出代码,以供后期复习参考
- 后端代码:
@RequestMapping(value = "/user")
@ResponseBody
public JSONPObject showUser(HttpServletRequest request, HttpServletResponse response,String name) throws IOException {
String callback = request.getParameter("callback");
Message message = new Message();
message.setId(1);
message.setNickName("Tina");
JSONPObject jsonpObject = new JSONPObject(callback,message );
return jsonpObject;
}```
- 前端代码
<!DOCTYPE html>
<html>
<head>
<title>pagenation-demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<script src="js/common/jquery-2.2.0.min.js"></script>
<script src="js/common/pagination.js"></script>
<script type="text/javascript">
$.ajax({
type:'GET',
url: 'http://localhost:8081/user',
dataType: 'jsonp',
jsonp:"callback",
jsonpCallback:'callback',
success: function(response){
done(response);
}
});
function callback(data) {
alert(data.nickName)
}
</script>
</head>
<body>
</body>
</html>
这是返回值的截图
有几点需要说明一下:
- 注意相关jar包的引入,不然会报很多奇怪的错误
- 注意请求的callback字段,前台与后台的要保持一致
- JSOONPObejct构造器的两个参数分别是对应的函数以及返回的对象