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

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

$.ajax({
  url: "/submit",
  method: "post",
  contenttype: "application/json",
  data: json.stringify({ email: "user@example.com" }),
  datatype: "json",
})
.done(function(data) {
  console.log("提交成功:", data);
});

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);
});

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

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);
  }
});

$.ajaxsetup({
  headers: {
    "x-csrftoken": csrftoken // 从 meta 标签或 cookie 中获取
  }
});

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

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

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

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