JavaScript中$.ajax()最新用法舉例詳解
更新時(shí)間：2025年04月21日 09:48:00 作者：aadnf
這篇文章主要介紹了JavaScript中$.ajax()最新用法的相關(guān)資料,包括基礎(chǔ)語(yǔ)法、現(xiàn)代回調(diào)方式、異步處理、高級(jí)場(chǎng)景示例、錯(cuò)誤處理、安全注意事項(xiàng)、替代方法以及調(diào)試技巧,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
一、基礎(chǔ)語(yǔ)法與核心參數(shù)
$.ajax({
url: "https://api.example.com/data",
method: "GET", // 推薦使用 method 替代 type
data: { key: "value" },
dataType: "json",
headers: { "Authorization": "Bearer token" },
success: function(response) {},
error: function(xhr, error) {},
complete: function() {},
});
?關(guān)鍵參數(shù)更新說(shuō)明
| 參數(shù)名 | 類型 | 說(shuō)明 |
|---|---|---|
| method | String | ?推薦替代 type，支持 GET, POST, PUT, DELETE 等。 |
| ?headers | Object | 自定義請(qǐng)求頭（如 Authorization），取代舊版 jsonp 的回調(diào)名稱配置。 |
| ?async | Boolean | 默認(rèn) true（異步），設(shè)為 false 會(huì)阻塞主線程（慎用）。 |
?二、現(xiàn)代回調(diào)方式（Promise 風(fēng)格）?
jQuery 3.x 開(kāi)始全面支持 ?Promise API，推薦使用 .done(), .fail(), .always() 替代舊版回調(diào)：
$.ajax({
url: "/api",
method: "POST",
data: JSON.stringify({ name: "John" }),
})
.done(function(response) {
console.log("成功:", response);
})
.fail(function(jqXHR, textStatus) {
console.error("失敗原因:", textStatus); // "timeout", "error", "abort"
})
.always(function() {
console.log("請(qǐng)求完成（無(wú)論成?。?);
});
?三、異步處理與 async/await
通過(guò)將 $.ajax() 返回的 jqXHR 對(duì)象轉(zhuǎn)換為 ?Promise，可使用 async/await：
async function fetchData() {
try {
const response = await $.ajax({
url: "/api/data",
method: "GET",
dataType: "json",
});
console.log(response);
} catch (error) {
if (error.responseJSON) {
console.error("服務(wù)器錯(cuò)誤:", error.responseJSON.message);
} else {
console.error("網(wǎng)絡(luò)錯(cuò)誤:", error.statusText);
}
}
}
fetchData();
?四、高級(jí)場(chǎng)景示例
?1. 發(fā)送 JSON 數(shù)據(jù)
$.ajax({
url: "/submit",
method: "POST",
contentType: "application/json",
data: JSON.stringify({ email: "user@example.com" }),
dataType: "json",
})
.done(function(data) {
console.log("提交成功:", data);
});
?2. 文件上傳
const formData = new FormData(document.getElementById("uploadForm"));
$.ajax({
url: "/upload",
method: "POST",
data: formData,
processData: false, // 防止 jQuery 拆分 FormData
contentType: false, // 不設(shè)置 Content-Type（瀏覽器自動(dòng)處理）
})
.done(function(response) {
console.log("上傳成功:", response);
});
?3. 跨域請(qǐng)求（CORS）?
$.ajax({
url: "https://api.example.com/cross-origin",
method: "GET",
xhrFields: {
withCredentials: true, // 發(fā)送 Cookie
},
headers: {
"Access-Control-Allow-Origin": "*", // 服務(wù)器需配置
},
})
.done(function(data) {
console.log("跨域數(shù)據(jù):", data);
});
?4. 請(qǐng)求取消
const xhr = $.ajax({
url: "/long-task",
method: "GET",
timeout: 5000, // 5秒超時(shí)
});
// 取消請(qǐng)求
setTimeout(() => xhr.abort(), 3000);
?五、錯(cuò)誤處理最佳實(shí)踐
$.ajax({
url: "/api/data",
method: "GET",
})
.fail(function(jqXHR, textStatus, errorThrown) {
switch (jqXHR.status) {
case 400:
console.error("參數(shù)錯(cuò)誤:", jqXHR.responseJSON.errors);
break;
case 401:
console.error("未授權(quán)，請(qǐng)登錄");
break;
case 404:
console.error("資源不存在");
break;
default:
console.error("請(qǐng)求失敗:", textStatus, errorThrown);
}
});
?六、安全注意事項(xiàng)
1.?CSRF 令牌防護(hù)?（Spring Security 等框架需要）：
$.ajaxSetup({
headers: {
"X-CSRFToken": csrfToken // 從 meta 標(biāo)簽或 cookie 中獲取
}
});
?2.防止 XSS 攻擊：
對(duì)用戶輸入使用 encodeURIComponent() 或 DOMPurify 清理。
?3.HTTPS 強(qiáng)制：
$.ajax({
url: "https://api.example.com", // 確保協(xié)議為 HTTPS
});
?七、替代方法：更簡(jiǎn)潔的 API
對(duì)于簡(jiǎn)單請(qǐng)求，可使用以下快捷方法：
| | |
| | |
| 方法 | 說(shuō)明 |
|---|---|
| $.get() | GET 請(qǐng)求 |
| $.post() | POST 請(qǐng)求 |
| $.getJSON() | GET + JSONP |
| $.ajaxSetup() | 全局默認(rèn)配置 |
// 使用 $.getJSON()
$.getJSON("/api/data")
.done(console.log)
.fail(console.error);
?八、jQuery 3.x 的重要變化
- ?棄用 type 參數(shù)：改用 method。 ?
- 默認(rèn) cache: true：GET 請(qǐng)求默認(rèn)緩存（可手動(dòng)設(shè)置 cache:false）。
- **jsonp 改為 dataType: “jsonp” **：
$.ajax({
url: "https://api.example.com/data",
dataType: "jsonp",
});
?九、調(diào)試技巧
?1.查看網(wǎng)絡(luò)請(qǐng)求：
瀏覽器開(kāi)發(fā)者工具（F12）的 ?Network 面板。
?2.啟用調(diào)試日志：
$.ajaxSetup({
debug: true // 輸出詳細(xì)日志到控制臺(tái)
});
通過(guò)掌握以上內(nèi)容，可以高效使用 $.ajax() 處理復(fù)雜的前端請(qǐng)求場(chǎng)景，同時(shí)結(jié)合現(xiàn)代 JavaScript 特性提升代碼可讀性和可維護(hù)性。
總結(jié)
到此這篇關(guān)于JavaScript中$.ajax()最新用法的文章就介紹到這了,更多相關(guān)JS $.ajax()用法詳解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ES6中的Promise對(duì)象與async和await方法詳解
Promise是es6引入的異步編程薪解決方案，語(yǔ)法上promise就是一個(gè)構(gòu)造函數(shù)，用來(lái)封裝異步操作病可以獲取其成功或失敗的結(jié)果，這篇文章主要介紹了ES6中的Promise對(duì)象與async和await方法,需要的朋友可以參考下2022-12-12
JavaScript實(shí)現(xiàn)簡(jiǎn)單隨機(jī)點(diǎn)名器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單隨機(jī)點(diǎn)名器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
js實(shí)現(xiàn)左右兩側(cè)浮動(dòng)廣告
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)左右兩側(cè)浮動(dòng)廣告，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
JS常見(jiàn)簡(jiǎn)單正則表達(dá)式驗(yàn)證功能小結(jié)【手機(jī),地址,企業(yè)稅號(hào),金額,身份證等】
這篇文章主要介紹了JS常見(jiàn)簡(jiǎn)單正則表達(dá)式驗(yàn)證功能,結(jié)合實(shí)例形式總結(jié)分析了JS針對(duì)手機(jī),地址,企業(yè)稅號(hào),金額,身份證等的常見(jiàn)驗(yàn)證技巧,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了JavaScript避免嵌套代碼，很多時(shí)候需要編寫(xiě)的邏輯本身就很惡心, 乍看之下, 堆頁(yè)巖般的判定嵌套里似乎每一層都是必要的, 也只能說(shuō)盡量讓它看起來(lái)不那么惡心2023-02-02
本文主要介紹了js中隱藏/顯示密碼的Zepto的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
js跟隨滾動(dòng)條滾動(dòng)浮動(dòng)代碼
js跟隨滾動(dòng)條滾動(dòng)浮動(dòng)代碼，對(duì)于firefox不兼容。2009-12-12
5角星想必大家并不陌生吧，在本文大家將會(huì)學(xué)習(xí)到使用JS畫(huà)5角星，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-09-09
使用typeof方法，typeof 返回的是字符串,其中就有一個(gè)是undefined，下面是示例代碼，大家可以看看2014-09-09
JavaScript實(shí)現(xiàn)設(shè)置默認(rèn)日期范圍為最近40天的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)設(shè)置默認(rèn)日期范圍為最近40天的方法,結(jié)合實(shí)例形式分析了javascript結(jié)合HTML5 date元素進(jìn)行時(shí)間運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-07-07