跨域報錯截圖

 

 

通過jsonp跨域請求的方式。JSONP和JSON雖然只有一個字母的區(qū)別，但是他們完全就是兩回事，很多人很容易把他們搞混。JSON是一種數(shù)據(jù)交換的格式，而JSONP則是一種非官方跨域數(shù)據(jù)交互協(xié)議。

首先來說一下前端JS是怎么發(fā)送請求。代碼如下所示：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$.ajax({  url:"your url",  type:"get or post",  async:false,  dataType : "jsonp",  //服務端用于接收callback調用的function名的參數(shù)  jsonp:"callbackparam",  //callback的function名稱  jsonpCallback:"success_jsonpCallback",  success:function(data){  console.log(data);  },  error:function(data){  console.log(data);  } });

這里的callbackparam和success_jsonpCallback可以理解為發(fā)送的data數(shù)據(jù)的鍵值對，可以自定義，但是callbackparam需要和后臺約定好參數(shù)名稱，因為后臺需要獲取到這個參數(shù)里面的值（即success_jsonpCallback）。

下面，最重要的來了，后臺怎么樣獲取和返回數(shù)據(jù)呢。代碼如下所示:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

PrintWriter out =null; String callback=req.getParameter("callbackparam"); String json=callback+"({'status':'ok'})"; try {  out = resp.getWriter(); } catch (IOException e) {  // TODO Auto-generated catch block  e.printStackTrace(); } out.print(json); out.flush(); out.close();

首先需要獲取參數(shù)名為callbackparam的值，這里獲取到的值就是“success_jsonpCallback”。然后將這個值加上一對小括號。小括號里放入你需要返回的數(shù)據(jù)內容，比如這里我返回一個JSON對象。當然你也可以返回其他對象，比如只返回一個字符串類型數(shù)據(jù)也可以。最后前端JS返回的數(shù)據(jù)就是這樣的：

1	success_jsonpCallback({'status':'ok'})

瀏覽器會自動解析為json對象，這時候你只需要在success回調函數(shù)中直接用data.status就可以了。