jQuery .success() 和 .complete() 的区别

在本文中，我们将介绍 jQuery 中 .success() 和 .complete() 方法的区别及其使用场景。

1. .success() 方法

.success() 方法是 jQuery Ajax 请求成功后执行的回调函数。该方法仅在 Ajax 请求成功且返回 200 状态码时被调用。它的基本语法如下：

$.ajax({
  url: "example.php",
  success: function(data){
    // 请求成功后执行的代码
  }
});

.success() 方法的作用是在 Ajax 请求成功后执行指定的代码，这在处理返回的数据时非常有用。

2. .complete() 方法

.complete() 方法是在 Ajax 请求完成后（无论是成功还是失败）执行的回调函数。它在 Ajax 请求的整个生命周期中都会被调用。它的基本语法如下：

$.ajax({
  url: "example.php",
  complete: function(xhr, status){
    // 请求完成后执行的代码
  }
});

.complete() 方法提供了一个可以在请求完成后执行的回调函数。它对于在请求过程中不论成功与否都需要执行相同的代码时非常有用。

3. 区别示例

为了更好地理解 .success() 和 .complete() 方法的区别，以下是一个示例：

$.ajax({
  url: "example.php",
  success: function(data){
    console.log("请求成功");
  },
  complete: function(xhr, status){
    console.log("请求完成");
  }
});

在这个示例中，如果 Ajax 请求成功返回 200 状态码，那么将会在控制台输出 “请求成功”；而如果请求失败或者返回其他状态码，仍然会在控制台输出 “请求完成”。可以看到，.success() 方法只在请求成功时执行，而 .complete() 方法在请求完成时无论成功还是失败都会执行。

4. 使用场景

.success() 方法通常用于处理成功返回的数据，例如更新页面上的内容或执行其他操作。而 .complete() 方法则适用于需要在请求完成后执行一些固定的操作，例如隐藏加载动画或显示一个通知。

以下是一个示例，演示了如何同时使用 .success() 和 .complete() 来处理 Ajax 请求：

$.ajax({
  url: "example.php",
  success: function(data){
    console.log("请求成功");
    // 更新页面上的内容
    $("#result").html(data);
  },
  complete: function(xhr, status){
    console.log("请求完成");
    // 隐藏加载动画
    $("#loading").hide();
    // 显示通知
    if(status === "success") {
      $("#notification").html("请求成功").show();
    } else {
      $("#notification").html("请求失败").show();
    }
  }
});

在这个示例中，当请求成功时，首先输出 “请求成功” 到控制台，并使用返回的数据更新页面上的一个元素；而不论请求成功与否，都会输出 “请求完成”，然后隐藏加载动画，并根据请求状态显示相应的通知。

总结

在本文中，我们介绍了 jQuery 中 .success() 和 .complete() 方法的区别及其使用场景。.success() 方法只在 Ajax 请求成功时执行，而 .complete() 方法在请求完成后（不论成功与否）执行。根据实际需求选择使用哪个方法，可以更好地控制和处理 Ajax 请求的结果。