JQuery Ajax跨域調(diào)用和非跨域調(diào)用問題實(shí)例分析
本文實(shí)例講述了JQuery Ajax跨域調(diào)用和非跨域調(diào)用問題。分享給大家供大家參考，具體如下：
現(xiàn)在的互聯(lián)網(wǎng)技術(shù)發(fā)展的越來越快，我們在開發(fā)過程中遇到的問題也越來越多。比如當(dāng)我們需要進(jìn)行跨域訪問數(shù)據(jù)的時(shí)候該如何進(jìn)行開發(fā)？本篇博文就記述如何使用Ajax進(jìn)行跨域訪問調(diào)用數(shù)據(jù)。
1、非跨域調(diào)用
我們用到的最多是這樣的方式，也就是非跨域的進(jìn)行訪問，只是簡單的在我們的網(wǎng)頁中進(jìn)行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("網(wǎng)絡(luò)異常", 1500);
}
});
}
2、跨域請求
在我們進(jìn)行跨域請求時(shí)需要改變ajax固定參數(shù)：
dataType:"jsonp",
crossDomain:true,
jsonpCallback:"jsonpCallbackFun",
jsonp:"callback",
且后臺返回的數(shù)據(jù)格式必須是：jsonpCallbackFun（json數(shù)據(jù)）; 這里的jsonpCallbackFun是你自定義的回調(diào)函數(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("網(wǎng)絡(luò)異常", 1500);
}
});
}
這樣即可跨域請求了！
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要記錄了在近期開發(fā)中遇到的jQuery dom基本查找方法，然后將各種方法性能做了一個(gè)比較，目的是希望自己在以后dom元素查找時(shí)，使用最優(yōu)的方案。文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
Jquery全選與反選點(diǎn)擊執(zhí)行一次的解決方案
在做項(xiàng)目時(shí)遇到一個(gè)bug，checkbox全選與反選功能，只能點(diǎn)擊一次，再點(diǎn)就不起作用了，為了解決此問題，我查找了好多資料，下面把具體解決方案整理分享給大家，需要的朋友可以參考下2015-08-08
SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實(shí)現(xiàn)的
json作為一種輕量級的數(shù)據(jù)交換格式，在前后臺數(shù)據(jù)交換中占據(jù)著非常重要的地位。Json的語法非常簡單，采用的是鍵值對表示形式,本文給大家介紹SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實(shí)現(xiàn)的，對spring mvc ajax json相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
jQuery+css實(shí)現(xiàn)的點(diǎn)擊圖片放大縮小預(yù)覽功能示例【圖片預(yù)覽 查看大圖】
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的點(diǎn)擊圖片放大縮小預(yù)覽功能,結(jié)合實(shí)例形式分析了jQuery+css控制圖片放大、縮小預(yù)覽查看的相關(guān)操作技巧,需要的朋友可以參考下2020-05-05
jquery.validate表單驗(yàn)證插件使用詳解
這篇文章主要為大家詳細(xì)介紹了jquery.validate表單驗(yàn)證插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件無響應(yīng)的解決辦法
這篇文章主要介紹了jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件無響應(yīng)的解決辦法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
jQuery動(dòng)態(tài)添加.active 實(shí)現(xiàn)導(dǎo)航效果代碼思路詳解
這篇文章主要介紹了jQuery動(dòng)態(tài)添加.active 實(shí)現(xiàn)導(dǎo)航效果代碼思路詳解,需要的朋友可以參考下2017-08-08
jquery如何實(shí)現(xiàn)錨點(diǎn)鏈接之間的平滑滾動(dòng)
實(shí)現(xiàn)錨點(diǎn)鏈接之間的平滑滾動(dòng)的方法有很多，在接下來的文章中為大家介紹下，jquery是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過2013-12-12
實(shí)例解析jQuery中proxy()函數(shù)的用法
proxy()主要用于在同樣的上下文語境中指向另一個(gè)對象,下面我們就以實(shí)例解析jQuery中proxy()函數(shù)的用法,需要的朋友可以參考下2016-05-05
jQuery UI 實(shí)現(xiàn)email輸入提示實(shí)例
本文為大家介紹下使用jQuery UI 實(shí)現(xiàn)email輸入提示，具體思路如下，感興趣的朋友可以參考下2013-08-08