一、基础语法与核心参数

1. $.ajax({
   
2.   url: "https://api.example.com/data",
   
3.   method: "GET", // 推荐使用 method 替代 type
   
4.   data: { key: "value" },
   
5.   dataType: "json",
   
6.   headers: { "Authorization": "Bearer token" },
   
7.   success: function(response) {},
   
8.   error: function(xhr, error) {},
   
9.   complete: function() {},
   
10. });

复制代码

​关键参数更新说明
参数名类型说明methodString​推荐替代 type，支持 GET, POST, PUT, DELETE 等。​headersObject自定义请求头（如 Authorization），取代旧版 jsonp 的回调名称配置。​asyncBoolean默认 true（异步），设为 false 会阻塞主线程（慎用）。
​二、现代回调方式（Promise 风格）​

jQuery 3.x 开始全面支持 ​Promise API，推荐使用 .done(), .fail(), .always() 替代旧版回调：

1. $.ajax({
   
2.   url: "/api",
   
3.   method: "POST",
   
4.   data: JSON.stringify({ name: "John" }),
   
5. })
   
6. .done(function(response) {
   
7.   console.log("成功:", response);
   
8. })
   
9. .fail(function(jqXHR, textStatus) {
   
10.   console.error("失败原因:", textStatus); // "timeout", "error", "abort"
    
11. })
    
12. .always(function() {
    
13.   console.log("请求完成（无论成败）");
    
14. });

复制代码

​三、异步处理与 async/await

通过将 $.ajax() 返回的 jqXHR 对象转换为 ​Promise，可使用 async/await：

1. async function fetchData() {
   
2.   try {
   
3.     const response = await $.ajax({
   
4.       url: "/api/data",
   
5.       method: "GET",
   
6.       dataType: "json",
   
7.     });
   
8.     console.log(response);
   
9.   } catch (error) {
   
10.     if (error.responseJSON) {
    
11.       console.error("服务器错误:", error.responseJSON.message);
    
12.     } else {
    
13.       console.error("网络错误:", error.statusText);
    
14.     }
    
15.   }
    
16. }
    
17. fetchData();

复制代码

​四、高级场景示例

​1. 发送 JSON 数据

1. $.ajax({
   
2.   url: "/submit",
   
3.   method: "POST",
   
4.   contentType: "application/json",
   
5.   data: JSON.stringify({ email: "user@example.com" }),
   
6.   dataType: "json",
   
7. })
   
8. .done(function(data) {
   
9.   console.log("提交成功:", data);
   
10. });

复制代码

​2. 文件上传

1. const formData = new FormData(document.getElementById("uploadForm"));
   
2. 
   
3. $.ajax({
   
4.   url: "/upload",
   
5.   method: "POST",
   
6.   data: formData,
   
7.   processData: false, // 防止 jQuery 拆分 FormData
   
8.   contentType: false, // 不设置 Content-Type（浏览器自动处理）
   
9. })
   
10. .done(function(response) {
    
11.   console.log("上传成功:", response);
    
12. });

复制代码

​3. 跨域请求（CORS）​

1. $.ajax({
   
2.   url: "https://api.example.com/cross-origin",
   
3.   method: "GET",
   
4.   xhrFields: {
   
5.     withCredentials: true, // 发送 Cookie
   
6.   },
   
7.   headers: {
   
8.     "Access-Control-Allow-Origin": "*", // 服务器需配置
   
9.   },
   
10. })
    
11. .done(function(data) {
    
12.   console.log("跨域数据:", data);
    
13. });

复制代码

​4. 请求取消

1. const xhr = $.ajax({
   
2.   url: "/long-task",
   
3.   method: "GET",
   
4.   timeout: 5000, // 5秒超时
   
5. });
   
6. 
   
7. // 取消请求
   
8. setTimeout(() => xhr.abort(), 3000);

复制代码

​五、错误处理最佳实践

1. $.ajax({
   
2.   url: "/api/data",
   
3.   method: "GET",
   
4. })
   
5. .fail(function(jqXHR, textStatus, errorThrown) {
   
6.   switch (jqXHR.status) {
   
7.     case 400:
   
8.       console.error("参数错误:", jqXHR.responseJSON.errors);
   
9.       break;
   
10.     case 401:
    
11.       console.error("未授权，请登录");
    
12.       break;
    
13.     case 404:
    
14.       console.error("资源不存在");
    
15.       break;
    
16.     default:
    
17.       console.error("请求失败:", textStatus, errorThrown);
    
18.   }
    
19. });

复制代码

​六、安全注意事项

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

1. $.ajaxSetup({
   
2.   headers: {
   
3.     "X-CSRFToken": csrfToken // 从 meta 标签或 cookie 中获取
   
4.   }
   
5. });

复制代码

​2.防止 XSS 攻击：
对用户输入使用 encodeURIComponent() 或 DOMPurify 清理。
​3.HTTPS 强制：

1. $.ajax({
   
2.   url: "https://api.example.com", // 确保协议为 HTTPS
   
3. });

复制代码

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

对于简单请求，可使用以下快捷方法：
| | |
| | |
方法说明$.get()GET 请求$.post()POST 请求$.getJSON()GET + JSONP$.ajaxSetup()全局默认配置

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

复制代码

​八、jQuery 3.x 的重要变化

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

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

复制代码

​九、调试技巧

​1.查看网络请求：
浏览器开发者工具（F12）的 ​Network 面板。
​2.启用调试日志：

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

复制代码

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

总结

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

来源：https://www.jb51.net/javascript/340022a1c.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！