搞了好久的jsonp,才發現原來是自己的攔截器把我給攔截了,所以一直失敗。
為了跨域就需要用jsonp。就比如說,原本我們的項目是寫在一個項目下的,並且用的是jsp。此時,我直接將一個頁面拖到桌面,改為html,然后再在這個頁面上使用jsonp來做到與后端的數據進行交互,這就算是跨域了,因為端口號不同。
這也是前后端分離。
需要注意的幾點:
- jsonp返回的數據一定得是json,不然會出錯
- 好像沒了。。。
看代碼:
url其實就是要寫完整,包括你啟動服務器的端口號
dataType肯定要改為jsonp的
jsonp:可以不寫,因為默認就是callback
jsonpCallback:說是一個回調函數,相當於success后的方法,就是可以寫在success外面,但我不知道怎么用
最重要的是,在后端Controller中,一定要接收callback,並且返回值的時候一定得是json格式
return callback(形參),其實return的就是這樣的一個東西,這樣他就能獲取到了。其實看了網上很多博客,他們起初都是解釋到src是可以直接跨域訪問js文件等等。然后他們就在js中寫一個方法,來跨域獲取內容,所以這兒寫return的時候也就相當於返回一個方法,里面有參數。
被注釋掉的東西是允許跨域的方法,只要寫了這個,你用普通的Ajax就可以跨域訪問到這兒。
其他傳數據什么的和普通Ajax是一樣的
@ResponseBody
@RequestMapping("/jsonp")
public String jsonp(@RequestParam(value="callback", required = false)String callback, HttpServletResponse response){
// response.setHeader("Access-Control-Allow-Origin", "*");
String str = "{a:\"b\"}";
return callback+"("+str+")";
}
$.ajax({
url: "http://localhost:8080/jsonp",
type: "get",
dataType: "jsonp",
data: {hello: "hello"},
//jsonp: "callback",
//jsonpCallback: "callback",
success: function(data){
alert(data);
},
error: function(){
alert("Wrong");
}
})