欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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ō)明
methodString?推薦替代 type，支持 GET, POST, PUT, DELETE 等。
?headersObject自定義請(qǐng)求頭（如 Authorization），取代舊版 jsonp 的回調(diào)名稱配置。
?asyncBoolean默認(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)文章

最新評(píng)論