识别jQuery AJAX事件的触发元素：通过自定义选项增强全局回调

核心解决方案：通过自定义Ajax选项关联触发元素

解决这一问题的关键在于利用 $.ajax() 方法的 settings 对象。当您调用 $.ajax() 发送请求时，可以向其 settings 对象添加任何自定义属性。这些自定义属性随后会在全局AJAX事件的回调函数中，通过 settings 参数被访问到。

实现步骤：

1. 在发起AJAX请求时注入元素引用： 当您通过自己的代码手动发起 $.ajax() 请求时（例如，在表单提交事件中），可以在 settings 对象中添加一个自定义属性，比如 element，并将其值设置为触发请求的DOM元素（例如 this）。

2. 在全局AJAX事件中识别触发元素： 在 ajaxSend、ajaxComplete 等全局事件的回调函数中，检查传入的 settings 参数是否包含您自定义的 element 属性。如果存在，则说明该请求是由您指定了该属性的元素触发的。

示例代码

步骤一：在触发请求时注入元素引用

Musico

Musico 是一个AI驱动的软件引擎，可以生成音乐。 它可以对手势、动作、代码或其他声音做出反应。

下载

假设我们有一个带有 data-ajax="true" 属性的表单，我们希望在它提交时，手动通过 $.ajax() 发送数据，并关联该表单元素。

// 监听特定表单的提交事件
$(document).on("submit", "form[data-ajax=true]", function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
    const $form = $(this); // 获取当前提交的表单元素

    $.ajax({
        url: $form.attr("action"), // 从表单的action属性获取URL
        method: $form.attr("method") || "GET", // 从表单的method属性获取请求方法
        data: $form.serialize(), // 序列化表单数据
        element: this, // 关键步骤：将当前表单元素作为自定义属性传入
        dataType: "json", // 假设期望返回JSON数据
        beforeSend: function() {
            // 可以在此处执行表单特定的预处理，例如显示加载动画
            $form.find(":submit").prop("disabled", true).text("提交中...");
        },
        success: function(response) {
            console.log("表单提交成功:", response);
            // 处理成功响应，例如更新UI
        },
        error: function(xhr, status, error) {
            console.error("表单提交失败:", error);
            // 处理错误响应
        },
        complete: function() {
            // 无论成功或失败，都在此处恢复表单状态
            $form.find(":submit").prop("disabled", false).text("提交");
        }
    });
});

步骤二：在全局Ajax事件中识别触发元素

现在，我们可以在全局AJAX事件中，通过检查 settings.element 来判断请求是否由我们注入的特定表单触发。

$(document).on({
    ajaxSend: function(e, request, settings) {
        if (settings.element) {
            console.log("AJAX请求由特定元素触发:", settings.element);
            // 可以在这里对特定元素触发的请求进行特殊处理
            // 例如，统一显示加载指示器，或对特定元素执行全局操作
            // $(settings.element).addClass("is-loading");
        } else {
            console.log("AJAX请求由非特定元素触发 (或第三方库触发)");
        }
    },
    ajaxComplete: function(e, request, settings) {
        if (settings.element) {
            console.log("AJAX请求完成，触发元素:", settings.element);
            // 请求完成后恢复元素状态
            // $(settings.element).removeClass("is-loading");
        }
    },
    ajaxSuccess: function(e, request, settings) {
        if (settings.element) {
            console.log("AJAX请求成功，触发元素:", settings.element);
        }
    },
    ajaxError: function(e, request, settings) {
        if (settings.element) {
            console.log("AJAX请求失败，触发元素:", settings.element);
            // 针对特定元素触发的错误进行处理
        }
    }
});

通过这种方式，我们成功地将特定的DOM元素与全局AJAX事件关联起来，从而在全局回调中能够精确地识别和操作触发请求的元素。

重要注意事项

1. 适用范围限制： 此方法仅适用于您自己的代码中明确调用 $.ajax() 并能够控制其 settings 对象的情况。这意味着您必须手动编写或封装AJAX请求，才能注入 element 这样的自定义属性。

2. 第三方库的挑战： 此方案不适用于由第三方JavaScript库（如 jquery.unobtrusive-ajax.js、某些前端框架或插件）触发的AJAX请求。这些库通常会在内部调用 $.ajax()，但您无法直接修改它们的源代码以注入自定义的 element 属性到 settings 对象中。对于这类场景，您可能需要：

   • 查阅第三方库的文档，看它是否提供了自己的钩子或事件来在AJAX请求前后进行干预。
   • 如果库提供了自定义事件，可以监听这些事件来获取更多上下文信息。
   • 在极少数情况下，如果实在无法通过库提供的API解决，可能需要考虑更复杂的DOM事件监听或猴子补丁（不推荐，易引入维护问题）。

总结

在jQuery全局AJAX事件中识别触发请求的DOM元素是一个常见需求。通过向 $.ajax() 的 settings 对象注入自定义属性（例如 element: this），我们可以在 ajaxSend、ajaxComplete 等全局回调中有效地关联并识别由我们自身代码发起的AJAX请求的来源。然而，理解并接受此方法在处理第三方库时存在的局限性至关重要。对于无法控制 $.ajax() 调用的场景，应优先寻求第三方库自身提供的扩展点或事件机制。