亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript中$.ajax()最新用法舉例詳解

 更新時間：2025年04月21日 09:48:00   作者：aadnf  
這篇文章主要介紹了JavaScript中$.ajax()最新用法的相關資料,包括基礎語法、現(xiàn)代回調方式、異步處理、高級場景示例、錯誤處理、安全注意事項、替代方法以及調試技巧,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

一、基礎語法與核心參數(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() {},
});

?關鍵參數(shù)更新說明

參數(shù)名類型說明
methodString?推薦替代 type，支持 GET, POST, PUT, DELETE 等。
?headersObject自定義請求頭（如 Authorization），取代舊版 jsonp 的回調名稱配置。
?asyncBoolean默認 true（異步），設為 false 會阻塞主線程（慎用）。

?二、現(xiàn)代回調方式（Promise 風格）?

jQuery 3.x 開始全面支持 ?Promise API，推薦使用 .done(), .fail(), .always() 替代舊版回調：

$.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("請求完成（無論成敗）");
});

?三、異步處理與 async/await

通過將 $.ajax() 返回的 jqXHR 對象轉換為 ?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("服務器錯誤:", error.responseJSON.message);
    } else {
      console.error("網(wǎng)絡錯誤:", error.statusText);
    }
  }
}
fetchData();

?四、高級場景示例

?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, // 不設置 Content-Type（瀏覽器自動處理）
})
.done(function(response) {
  console.log("上傳成功:", response);
});

?3. 跨域請求（CORS）?

$.ajax({
  url: "https://api.example.com/cross-origin",
  method: "GET",
  xhrFields: {
    withCredentials: true, // 發(fā)送 Cookie
  },
  headers: {
    "Access-Control-Allow-Origin": "*", // 服務器需配置
  },
})
.done(function(data) {
  console.log("跨域數(shù)據(jù):", data);
});

?4. 請求取消

const xhr = $.ajax({
  url: "/long-task",
  method: "GET",
  timeout: 5000, // 5秒超時
});

// 取消請求
setTimeout(() => xhr.abort(), 3000);

?五、錯誤處理最佳實踐

$.ajax({
  url: "/api/data",
  method: "GET",
})
.fail(function(jqXHR, textStatus, errorThrown) {
  switch (jqXHR.status) {
    case 400:
      console.error("參數(shù)錯誤:", jqXHR.responseJSON.errors);
      break;
    case 401:
      console.error("未授權，請登錄");
      break;
    case 404:
      console.error("資源不存在");
      break;
    default:
      console.error("請求失敗:", textStatus, errorThrown);
  }
});

?六、安全注意事項

1.?CSRF 令牌防護?（Spring Security 等框架需要）：

$.ajaxSetup({
  headers: {
    "X-CSRFToken": csrfToken // 從 meta 標簽或 cookie 中獲取
  }
});

?2.防止 XSS 攻擊：

對用戶輸入使用 encodeURIComponent() 或 DOMPurify 清理。

?3.HTTPS 強制：

$.ajax({
  url: "https://api.example.com", // 確保協(xié)議為 HTTPS
});

?七、替代方法：更簡潔的 API

對于簡單請求，可使用以下快捷方法：

| | |

| | |

方法說明
$.get()GET 請求
$.post()POST 請求
$.getJSON()GET + JSONP
$.ajaxSetup()全局默認配置
// 使用 $.getJSON()
$.getJSON("/api/data")
  .done(console.log)
  .fail(console.error);

?八、jQuery 3.x 的重要變化

  • ?棄用 type 參數(shù)：改用 method。 ?
  • 默認 cache: true：GET 請求默認緩存（可手動設置 cache:false）。
  • **jsonp 改為 dataType: “jsonp” **：
$.ajax({
  url: "https://api.example.com/data",
  dataType: "jsonp",
});

?九、調試技巧

?1.查看網(wǎng)絡請求：

瀏覽器開發(fā)者工具（F12）的 ?Network 面板。

?2.啟用調試日志：

$.ajaxSetup({
  debug: true // 輸出詳細日志到控制臺
});

通過掌握以上內容，可以高效使用 $.ajax() 處理復雜的前端請求場景，同時結合現(xiàn)代 JavaScript 特性提升代碼可讀性和可維護性。

總結

到此這篇關于JavaScript中$.ajax()最新用法的文章就介紹到這了,更多相關JS $.ajax()用法詳解內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論