JQuery Ajax跨域調用和非跨域調用問題實例分析
本文實例講述了JQuery Ajax跨域調用和非跨域調用問題。分享給大家供大家參考,具體如下:
現(xiàn)在的互聯(lián)網技術發(fā)展的越來越快,我們在開發(fā)過程中遇到的問題也越來越多。比如當我們需要進行跨域訪問數(shù)據(jù)的時候該如何進行開發(fā)?本篇博文就記述如何使用Ajax進行跨域訪問調用數(shù)據(jù)。
1、非跨域調用
我們用到的最多是這樣的方式,也就是非跨域的進行訪問,只是簡單的在我們的網頁中進行Ajax使用即可。如下面代碼:
/**
* 非跨域請求方式
*/
function feikuayu() {
$.ajax({
type: "post",
url: platformUrl + "/security/modifyPwd",
data: $('#updatepwdform').serialize(),
dataType: "json",
success: function (data) {
$("#updatepwd_btn").click();
$.toast("修改成功,系統(tǒng)即將退出,請重新登錄", 1500);
},
error: function () {
$.toast("網絡異常", 1500);
}
});
}
2、跨域請求
在我們進行跨域請求時需要改變ajax固定參數(shù):
dataType:"jsonp",
crossDomain:true,
jsonpCallback:"jsonpCallbackFun",
jsonp:"callback",
且后臺返回的數(shù)據(jù)格式必須是:jsonpCallbackFun(json數(shù)據(jù)); 這里的jsonpCallbackFun是你自定義的回調函數(shù)方法名。
代碼如下:
/**
* 跨域請求方式
*/
function kuayu() {
$.ajax({
type: "post",
url: platformUrl + "/security/modifyPwd",
data: params,
dataType: "jsonp",
crossDomain: true,
jsonpCallback: "jsonpCallbackFun",
jsonp: "callback",
success: function (data) {
if (data.result == 1) {
$("#updatepwd_btn").click();
$.toast("修改成功,系統(tǒng)即將退出,請重新登錄", 1500);
setTimeout("logout()", 1600);
} else if (data.result == 2) {
$.toast(data.msg, 1500);
} else {
$.toast("修改失敗", 1500);
}
},
error: function () {
$.toast("網絡異常", 1500);
}
});
}
這樣即可跨域請求了!
更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jquery中Ajax用法總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實現(xiàn)的
json作為一種輕量級的數(shù)據(jù)交換格式,在前后臺數(shù)據(jù)交換中占據(jù)著非常重要的地位。Json的語法非常簡單,采用的是鍵值對表示形式,本文給大家介紹SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實現(xiàn)的,對spring mvc ajax json相關知識感興趣的朋友一起學習吧2015-12-12
jQuery+css實現(xiàn)的點擊圖片放大縮小預覽功能示例【圖片預覽 查看大圖】
這篇文章主要介紹了jQuery+css實現(xiàn)的點擊圖片放大縮小預覽功能,結合實例形式分析了jQuery+css控制圖片放大、縮小預覽查看的相關操作技巧,需要的朋友可以參考下2020-05-05
jQuery on()方法綁定動態(tài)元素的點擊事件無響應的解決辦法
這篇文章主要介紹了jQuery on()方法綁定動態(tài)元素的點擊事件無響應的解決辦法的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07
jQuery動態(tài)添加.active 實現(xiàn)導航效果代碼思路詳解
這篇文章主要介紹了jQuery動態(tài)添加.active 實現(xiàn)導航效果代碼思路詳解,需要的朋友可以參考下2017-08-08

