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);
  });
相关推荐
敲敲了个代码13 分钟前
[特殊字符] Web 字体裁剪优化实践:把 42MB 字体包瘦到 1.6MB
前端·javascript·学习·html·web
扎瓦斯柯瑞迫25 分钟前
Cursor 提示"Too Many Accounts"?一行命令重置机器码
前端·javascript·后端
前端付豪1 小时前
Vue3 响应式来!
前端·javascript·vue.js
芝士麻雀1 小时前
Zustand 深度解析:原理、源码与最佳实践
前端·react.js·前端框架
fruge1 小时前
前端性能优化实战指南:从首屏加载到用户体验的全面提升
前端·性能优化·ux
ZYMFZ1 小时前
Redis主从复制与哨兵集群
前端·git·github
lumi.1 小时前
前端本地存储技术笔记:localStorage 与 sessionStorage 详解
前端·javascript·笔记
旧雨散尘1 小时前
【react】初学react5-react脚手架搭建中的小众知识
前端·react.js·前端框架
炫饭第一名1 小时前
🌍🌍🌍字节一面场景题:异步任务调度器
前端·javascript·面试
烛阴1 小时前
Lua字符串的利刃:模式匹配的艺术与实践
前端·lua