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

ES6中的Promise对象与async和await方法详解
Promise是es6引入的异步编程薪解决方案，语法上promise就是一个构造函数，用来封装异步操作病可以获取其成功或失败的结果，这篇文章主要介绍了ES6中的Promise对象与async和await方法,需要的朋友可以参考下
2022-12-12
JavaScript实现简单随机点名器
这篇文章主要为大家详细介绍了JavaScript实现简单随机点名器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
js实现左右两侧浮动广告
这篇文章主要为大家详细介绍了js实现左右两侧浮动广告，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
这篇文章主要介绍了JS常见简单正则表达式验证功能,结合实例形式总结分析了JS针对手机,地址,企业税号,金额,身份证等的常见验证技巧,需要的朋友可以参考下
2017-01-01
JavaScript避免嵌套代码浅析
这篇文章主要介绍了JavaScript避免嵌套代码，很多时候需要编写的逻辑本身就很恶心, 乍看之下, 堆页岩般的判定嵌套里似乎每一层都是必要的, 也只能说尽量让它看起来不那么恶心
2023-02-02
Zepto实现密码的隐藏/显示
本文主要介绍了js中隐藏/显示密码的Zepto的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
2017-04-04
js跟随滚动条滚动浮动代码
js跟随滚动条滚动浮动代码，对于firefox不兼容。
2009-12-12
JS画5角星方法介绍
5角星想必大家并不陌生吧，在本文大家将会学习到使用JS画5角星，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-09-09
使用typeof方法判断undefined类型
使用typeof方法，typeof 返回的是字符串,其中就有一个是undefined，下面是示例代码，大家可以看看
2014-09-09
JavaScript实现设置默认日期范围为最近40天的方法分析
这篇文章主要介绍了JavaScript实现设置默认日期范围为最近40天的方法,结合实例形式分析了javascript结合HTML5 date元素进行时间运算相关操作技巧,需要的朋友可以参考下
2017-07-07