JQ 的 AJAX 请求方法

$.ajax() 基础方法

$.ajax() 是 jQuery 中最底层的 AJAX 实现,支持高度自定义配置:

javascript 复制代码
$.ajax({
  url: "https://api.example.com/data",
  type: "GET", // 或 "POST"
  dataType: "json", // 预期返回的数据类型
  data: { key1: "value1", key2: "value2" }, // 发送的数据
  success: function(response) {
    console.log("请求成功:", response);
  },
  error: function(xhr, status, error) {
    console.error("请求失败:", status, error);
  }
});

快捷方法

jQuery 提供了更简洁的快捷方法:

GET 请求

javascript 复制代码
$.get("https://api.example.com/data", { param1: "value1" }, function(response) {
  console.log("GET 响应:", response);
}, "json");

POST 请求

javascript 复制代码
$.post("https://api.example.com/submit", { name: "John", age: 30 }, function(response) {
  console.log("POST 响应:", response);
});

加载 HTML 片段

javascript 复制代码
$("#result").load("partial.html #content"); // 加载指定元素的片段

处理 JSON 数据

获取 JSON 数据

javascript 复制代码
$.getJSON("https://api.example.com/users", function(data) {
  $.each(data, function(index, user) {
    console.log(user.name);
  });
});

提交 JSON 数据

javascript 复制代码
$.ajax({
  url: "https://api.example.com/save",
  type: "POST",
  contentType: "application/json",
  data: JSON.stringify({ id: 1, name: "Alice" }),
  success: function(response) {
    console.log("保存成功");
  }
});
全局事件处理

jQuery 允许绑定全局 AJAX 事件:

javascript 复制代码
$(document).ajaxStart(function() {
  $("#loading").show();
}).ajaxStop(function() {
  $("#loading").hide();
});
跨域请求 (CORS)

对于跨域请求,确保服务器支持 CORS:

javascript 复制代码
$.ajax({
  url: "https://other-domain.com/api",
  crossDomain: true,
  xhrFields: {
    withCredentials: true // 需要时发送凭据
  }
});

使用 Promises

jQuery AJAX 返回的是 jqXHR 对象,支持 Promise 语法:

javascript 复制代码
$.get("https://api.example.com/data")
  .done(function(data) {
    console.log("成功:", data);
  })
  .fail(function(xhr, status) {
    console.error("失败:", status);
  });
相关推荐
ObjectX前端实验室2 小时前
【react18原理探究实践】分层解析React Fiber 核心工作流程
前端·react.js
IT_陈寒2 小时前
「JavaScript 性能优化:10个让V8引擎疯狂提速的编码技巧」
前端·人工智能·后端
ObjectX前端实验室3 小时前
【react18原理探究实践】scheduler原理之Task 完整生命周期解析
前端·react.js
ObjectX前端实验室3 小时前
【react18原理探究实践】调度器(Scheduler)原理深度解析
前端·react.js
路漫漫心远3 小时前
音视频学习笔记十八——图像处理之OpenCV检测
前端
摸着石头过河的石头3 小时前
从零开始玩转前端:一站式掌握Web开发基础知识
前端·javascript
sniper_fandc4 小时前
关于Mybatis-Plus的insertOrUpdate()方法使用时的问题与解决—数值精度转化问题
java·前端·数据库·mybatisplus·主键id
10岁的博客4 小时前
技术博客SEO优化全攻略
前端
南屿im5 小时前
别再被引用坑了!JavaScript 深浅拷贝全攻略
前端·javascript