异常教程

jQuery ajaxComplete() 方法（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

方法概述

在前端开发中，AJAX（Asynchronous JavaScript and XML）技术是实现页面无刷新交互的核心工具。而 jQuery ajaxComplete() 方法，正是 jQuery 框架中用于监听和响应所有 AJAX 请求完成事件的“全局监听器”。它像一个忠实的“守门人”，每当页面中通过 jQuery 发起的 AJAX 请求完成时，它都会触发预设的回调函数，帮助开发者统一管理请求后的逻辑处理。

为什么需要它？

想象一个场景：你的页面中有多个表单提交、数据加载或异步操作，每个请求完成后都需要执行相似的操作（例如显示提示信息、更新 UI 状态或记录日志）。如果为每个请求单独编写重复的代码，不仅冗余，还难以维护。此时，ajaxComplete() 可以将这些逻辑集中管理，避免代码爆炸。

基础语法与参数

jQuery.ajaxComplete() 的语法结构如下：

$(selector).ajaxComplete(function(event, xhr, settings));

参数详解

参数说明
event事件对象，包含触发事件的上下文信息。
xhrXMLHttpRequest 对象，包含请求的响应数据、状态码等。
settings请求的配置参数对象，如 URL、HTTP 方法、超时时间等。

参数使用示例

通过 settings.url 可以获取请求的 URL，xhr.status 可以检查 HTTP 状态码，而 xhr.responseText 则是服务器返回的原始数据。

工作原理：全局监听与选择性触发

ajaxComplete() 是一个全局事件监听器，但它的触发条件有两点：

  1. 全局触发：当页面中任何通过 jQuery 的 AJAX 方法（如 $.get()、$.post()、$.ajax()）发起的请求完成时，它都会被触发。
  2. 选择性触发：若通过 $(selector).ajaxComplete() 绑定到特定元素，回调函数仅在该元素的 AJAX 请求完成时触发。

形象比喻

将 ajaxComplete() 比作一座“交通监控中心”：

  • 全局模式：监控所有车辆（AJAX 请求）的到达。
  • 选择性模式：仅关注特定车牌号（元素绑定的请求）的车辆。

典型应用场景与案例

案例 1：表单提交后的统一处理

假设页面中有多个表单，每次提交后都需要显示成功或错误提示。使用 ajaxComplete() 可以避免为每个表单重复编写代码。

$(document).ajaxComplete(function(event, xhr, settings) {  
    if (settings.type === "POST" && settings.url === "/submit-form") {  
        const response = JSON.parse(xhr.responseText);  
        if (response.success) {  
            $("#message").text("提交成功！");  
        } else {  
            $("#message").text("提交失败，请重试");  
        }  
    }  
});

解析

  • 条件判断：通过 settings.url 和 settings.type 筛选目标请求。
  • 数据解析：假设服务器返回 JSON 格式数据，需先解析 xhr.responseText。

案例 2：全局加载状态管理

当页面中有多个 AJAX 请求时，可以利用 ajaxComplete() 统一控制加载动画的显示与隐藏。

let activeRequests = 0;  

$(document).ajaxStart(function() {  
    activeRequests++;  
    $("#loading").show();  
}).ajaxComplete(function() {  
    activeRequests--;  
    if (activeRequests === 0) {  
        $("#loading").hide();  
    }  
});

解析

  • 配合 ajaxStart()：在请求开始时增加计数器，避免因多个请求导致加载动画提前消失。
  • 动态控制：通过计数器判断所有请求是否完成，再隐藏加载层。

进阶技巧：参数传递与上下文绑定

技巧 1：传递自定义数据

通过 ajaxComplete() 的 settings 参数，可以传递自定义的 data 字段，例如：

$.ajax({  
    url: "/api/data",  
    data: { custom_key: "custom_value" },  
    success: function(response) {  
        // ...  
    }  
});  

// 在 ajaxComplete() 中获取数据  
$(document).ajaxComplete(function(event, xhr, settings) {  
    const customData = settings.data.custom_key;  
    console.log("自定义数据:", customData);  
});

技巧 2：绑定到特定元素

将监听器绑定到特定元素时，可以实现更精准的控制：

$("#form1").ajaxComplete(function(event, xhr, settings) {  
    // 仅当 #form1 的 AJAX 请求完成时触发  
    console.log("表单1的请求完成");  
});

常见问题与解决方案

问题 1：方法未触发

原因：可能未正确绑定事件或请求未通过 jQuery 方法发起。
解决方案：

  • 确保使用 $.ajax()、$.get() 等 jQuery 方法，而非原生的 XMLHttpRequest。
  • 检查事件绑定时机，确保在文档加载完成后绑定：
$(document).ready(function() {  
    $(document).ajaxComplete(...);  
});

问题 2：重复触发

原因：多次绑定 ajaxComplete() 导致回调函数被重复执行。
解决方案：

  • 使用 off() 方法解除旧监听，再重新绑定：
$(document).off("ajaxComplete").ajaxComplete(...);

与类似方法的对比

与 $.ajaxSuccess() 的区别

  • ajaxComplete()：监听所有 AJAX 请求完成，无论成功或失败。
  • $.ajaxSuccess()：仅在请求成功时触发。

与 done() 方法的对比

  • done() 是针对单个 AJAX 请求的“局部监听器”，需附加到具体请求对象。
  • ajaxComplete() 是“全局监听器”，无需为每个请求单独处理。

结论

jQuery ajaxComplete() 方法通过全局监听和灵活的参数传递，为 AJAX 请求的统一管理提供了高效解决方案。无论是简化代码结构、管理全局状态，还是实现跨模块协作，它都能显著提升开发效率。

对于初学者，建议从简单案例入手，逐步探索其参数和应用场景；中级开发者则可结合计数器、自定义数据等技巧，实现更复杂的功能。掌握这一方法，将助你在前端开发中更加得心应手。

（全文约 1680 字）

最新发布

查看更多文章