JQuery Ajax事件：识别触发Ajax请求的表单元素

方法1：利用全局ajaxSend事件过滤目标请求 #

jquery.unobtrusive-ajax.js在发起AJAX请求时，会将触发请求的<form>元素设置为请求的context，因此可以通过全局ajaxSend事件，结合表单的data-ajax="true"属性精准过滤目标请求，同时直接获取触发表单：

$(document).ajaxSend(function(event, xhr, settings) {
  const $form = $(settings.context);
  // 仅处理unobtrusive ajax驱动的表单请求
  if ($form.is('form[data-ajax="true"]')) {
    // 这里编写你的beforeSend逻辑
    console.log('捕获到目标表单提交:', $form);
    // 示例：获取表单ID、修改请求头、校验表单数据等
    // 注意：若需终止请求，可调用xhr.abort()
  }
});

核心原理 #

unobtrusive-ajax插件在构造AJAX配置时，会强制将context指向当前触发提交的表单元素；通过settings.context直接获取表单，再配合data-ajax="true"属性过滤，既能避免捕获无关AJAX请求，又能拿到触发源表单。

方法2：包装$.ajax注入自定义钩子 #

如果需要更灵活的执行顺序（比如在原插件的beforeSend逻辑前后插入代码），可以临时包装$.ajax方法，实现无侵入式的钩子注入：

// 保存原生$.ajax方法
const originalAjax = $.ajax;

$.ajax = function(options) {
  const $form = $(options.context);
  if ($form.is('form[data-ajax="true"]')) {
    // 保存插件原本的beforeSend逻辑（如果存在）
    const originalBeforeSend = options.beforeSend;
    
    // 注入自定义beforeSend处理
    options.beforeSend = function(xhr, settings) {
      // 你的自定义逻辑优先执行
      console.log('自定义beforeSend触发，表单:', $form);
      
      // 调用插件原本的beforeSend逻辑（如果有）
      if (originalBeforeSend) {
        return originalBeforeSend.apply(this, arguments);
      }
    };
  }
  
  // 调用原生$.ajax方法，保留原有流程
  return originalAjax.apply(this, arguments);
};

注意事项 #

• 该方法完全不修改原插件代码，仅对$.ajax做一层包装，插件的原有提交逻辑不受任何干扰。
• 仅当请求的context为unobtrusive驱动的表单时才会触发自定义逻辑，不会影响其他AJAX请求。

为什么不推荐直接监听submit事件？ #

直接监听表单submit事件，需要确保代码在unobtrusive-ajax插件之前加载，否则插件已经阻止了默认提交并发起AJAX，无法关联到请求的beforeSend阶段（比如请求头设置、请求终止等操作）；而上述两种方法直接对接AJAX请求生命周期，更贴合需求。

内容的提问来源于stack exchange，提问作者Smitty-Werben-Jager-Manjenson