JavaScript中$.ajax()最新用法举例详解

更新时间：2025年04月21日 09:48:00 作者：aadnf

这篇文章主要介绍了JavaScript中$.ajax()最新用法的相关资料,包括基础语法、现代回调方式、异步处理、高级场景示例、错误处理、安全注意事项、替代方法以及调试技巧,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、基础语法与核心参数

$.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() {},
});

关键参数更新说明

参数名	类型	说明
method	String	推荐替代 type，支持 GET, POST, PUT, DELETE 等。
headers	Object	自定义请求头（如 Authorization），取代旧版 jsonp 的回调名称配置。
async	Boolean	默认 true（异步），设为 false 会阻塞主线程（慎用）。

二、现代回调方式（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("网络错误:", error.statusText);
    }
  }
}
fetchData();

四、高级场景示例

1. 发送 JSON 数据

$.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, // 发送 Cookie
  },
  headers: {
    "Access-Control-Allow-Origin": "*", // 服务器需配置
  },
})
.done(function(data) {
  console.log("跨域数据:", 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("参数错误:", 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", // 确保协议为 HTTPS
});

七、替代方法：更简洁的 API

对于简单请求，可使用以下快捷方法：

| | |

方法	说明
$.get()	GET 请求
$.post()	POST 请求
$.getJSON()	GET + JSONP
$.ajaxSetup()	全局默认配置

// 使用 $.getJSON()
$.getJSON("/api/data")
  .done(console.log)
  .fail(console.error);

八、jQuery 3.x 的重要变化

弃用 type 参数：改用 method。
默认 cache: true：GET 请求默认缓存（可手动设置 cache:false）。
**jsonp 改为 dataType: “jsonp” **：

$.ajax({
  url: "https://api.example.com/data",
  dataType: "jsonp",
});

九、调试技巧

1.查看网络请求：

浏览器开发者工具（F12）的 Network 面板。

2.启用调试日志：

$.ajaxSetup({
  debug: true // 输出详细日志到控制台
});

通过掌握以上内容，可以高效使用 $.ajax() 处理复杂的前端请求场景，同时结合现代 JavaScript 特性提升代码可读性和可维护性。

总结

到此这篇关于JavaScript中$.ajax()最新用法的文章就介绍到这了,更多相关JS $.ajax()用法详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js
$.ajax

JavaScript使用面向对象实现的拖拽功能详解
这篇文章主要介绍了JavaScript使用面向对象实现的拖拽功能,结合实例形式详细分析了javascript基于面向对象的拖拽功能实现思路、原理与具体操作技巧,需要的朋友可以参考下
2019-06-06
js指定日期增加指定月份的实现方法
这篇文章主要给大家介绍了关于js指定日期增加指定月份的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2018-12-12
js实现飞入星星特效代码
这篇文章主要介绍了js实现飞入星星特效代码,主要通过控制背景与飞入点的样式,结合setTimeout函数即可实现星星飞入的效果,对于学习javascript有不错的参考借鉴价值,需要的朋友可以参考下
2014-10-10
IFrame跨域高度自适应实现代码
最近在做项目中，遇到一个问题，就是iframe高度的自适应问题，以下是解决办法
2012-08-08
关于JSON解析的实现过程解析
这篇文章主要介绍了关于JSON解析的实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-10-10
前端基础JS的面试题及答案总结大全
作为前端开发,JS是重中之重,最近结束了面试的高峰期,下面这篇文章主要介绍了前端基础JS的面试题及答案总结的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2026-05-05
前端实现视频文件动画帧图片提取完整教程
相信很多小伙伴在一些短视频平台上传视频的时候,系统会自动帮我们生成一些视频中的画面帧的图片,让我们作为视频封面的功能,那么这些短视频平台是如何从视频中抽取关键帧来作为封面,今天博主就带着大家一起来探讨这个问题,感兴趣的小伙伴跟着小编一起来看看吧
2025-04-04
p5.js绘制创意自画像
这篇文章主要为大家详细介绍了p5.js绘制创意自画像，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
javascript小数计算出现近似值的解决办法
在javascript里面，小数只能进行相似计算，例如：5.06+1.30，你得到的结果会是6.359999999999999，但有的小数计算又是正确的，如果计算出现了近似值，你可以用如下的方法计算。
2010-02-02
微信小程序实现表单验证提交功能
这篇文章主要为大家详细介绍了微信小程序实现表单验证提交功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07