菜鸟教程
教程 jquery tutorial

错误处理与回调

在使用 jQuery 发送 AJAX 请求时，除了处理成功的情况，还应考虑失败场景和请求完成后的回调，以确保应用更稳定、用户体验更佳。

基本回调函数

jQuery 的 $.ajax() 支持以下回调：

  • success(response, status, xhr)：请求成功时触发
  • error(xhr, status, error)：请求失败时触发
  • complete(xhr, status)：无论成功与否都会触发

示例：完整的 AJAX 请求

js 
$.ajax({
  url: "data.json",
  method: "GET",
  dataType: "json",
  success: function (data) {
    $("#result").text("返回数据：" + data.name);
  },
  error: function (xhr, status, err) {
    console.error("发生错误：", status, err);
    $("#result").text("请求失败，请稍后再试。");
  },
  complete: function () {
    console.log("请求已完成");
  },
});

更简写的回调链式写法

js 
$.get("data.json")
  .done(function (res) {
    console.log("成功：", res);
  })
  .fail(function () {
    alert("请求失败！");
  })
  .always(function () {
    console.log("请求完成");
  });

示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function () {
    $("#btnLoad").click(function () {
      $.ajax({
        url: "/data.json",
        method: "GET",
        dataType: "json",
        success: function (res) {
          $("#output").text("用户名：" + res.name);
        },
        error: function () {
          $("#output").text("请求失败，请检查网络或接口地址。");
        },
        complete: function () {
          console.log("数据请求已完成");
        },
      });
    });
  });
</script>

<button id="btnLoad">请求数据</button>
<div id="output" style="margin-top: 10px"></div>

相关内容