天天看點

jquery ajax跨域的完美解決方法(jsonp方式)

ajax跨域請求的問題,JQuery對于Ajax的跨域請求有兩類解決方案,不過都是隻支援get方式,接下來為大家詳細介紹下用戶端JQuery.ajax的調用代碼

今天在項目中需要做遠端資料加載并渲染頁面,直到開發階段才意識到ajax跨域請求的問題,隐約記得Jquery有提過一個ajax跨域請求的解決方式,于是即刻翻出Jquery的API出來研究,發

JQuery對于Ajax的跨域請求有兩類解決方案,不過都是隻支援get方式。分别是JQuery的 jquery.ajax

jsonp格式和jquery.getScript方式。

什麼是jsonp格式呢?API原文:如果擷取的資料檔案存放在遠端伺服器上(域名不同,也就是跨域擷取資料),則需要使用jsonp類型。使用這種類型的話,會建立一個查詢字元串參數

callback=?

,這個參數會加在請求的URL後面。伺服器端應當在JSON資料前加上回調函數名,以便完成一個有效的JSONP請求。意思就是遠端服務端需要對傳回的資料做下處理,根據用戶端送出的callback的參數,傳回一個callback(json)的資料,而用戶端将會用script的方式處理傳回資料,來對json資料做處理。JQuery.getJSON也同樣支援jsonp的資料方式調用。  

1 $.ajax({      
2                     url:basepath+"/login/login?msg_base64="+msg_base64,
 3                     async: false,
 4 //                    data:{
 5 //                        "formContent":str,
 6 //                        "formName":formName,
 7 //                        "leixing":leixing
 8 //                    },
 9                     dataType:"jsonp",
10                     processData: false,     
11                     type:"get",
12                     success:function(data){
13                         data=data[0];
14                         alert(data);
15                         if(data.status=="0"){
16                             $("#usererror").html(data.msg);
17                         }else if(data.status=="1"){
18                             $("#pwderror").html(data.msg);
19                             }
20                         else if(data.status=="2"){
21                             alert("水電費:"+data.data);
22                             addCookie("token",data.data,1);//将令牌存入cookie中
23                             window.location.href="edit.html";
24                             }
25                     }
26                 });      
1 @ResponseBody // 将方法的傳回結果自動轉換為json格式字元串,注意需要導json的包
 2     @RequestMapping(value = "/login", method = RequestMethod.GET)
 3     public String login(HttpServletRequest request,String msg_base64) {
 4         
 5         
 6         String callback=request.getParameter("callback");
 7         //System.out.println(callback);
 8                                                                 // 資訊
 9 //        String msg_context_base64 = msg_base64.split(" ")[1];
10         String msg = NoteUtil.base64Decode(msg_base64);// 解密,解密後:username:password
11         String name = msg.split(":")[0];
12         String pwd = msg.split(":")[1];
13         NoteResult result = service.checkUser(name, pwd);
14         System.out.println("result  "+result.toString());
15         JSONArray json=JSONArray.fromObject(result);
16         System.out.println("  "+callback+"("+json+")");
17         return callback+"("+json.toString()+")";
18     }
19           

未來星開發團隊--狒狒

QQ:9715234

繼續閱讀