Laravel中AJAX请求重复发送问题排查求助

我开发了一个简易的Laravel任务管理应用，表单包含CSRF令牌字段、两个ID隐藏字段及一个任务标题输入框。使用AJAX提交表单时，所有AJAX请求均会重复发送两次，该问题在应用内所有AJAX请求中持续存在。

简化后的代码示例 #

JavaScript代码 #

$(()=> {
      $('.add-card').one('click',function(e) {
          e.preventDefault(); 
          var form = $(this).closest('form')[0]; 
          let url = baseUrl + ":8000/api/task/store"
          let data = retrieveFormData(form)    
          let _token = data['csrf-token']             
          ajaxCRUD("POST", url, {...data},_token, (response) => {
            console.log(response);
          });
        });
});

function ajaxCRUD(method, url, data, token,successFunc) {
$.ajax({
  type: method,
  url: url,
  data: data,
  beforeSend: function(xhr) {
    xhr.setRequestHeader('X-CSRF-TOKEN', token);
  },
  success: function (response) {
    if (successFunc) {
      successFunc(response);
    }
  },
  error: function (xhr, status, error) {
    console.error(xhr.responseText);
  },
});
}

function retrieveFormData(form) {
  let formElements = $(form).find('input, select, textarea');
  let formData = {};
  formElements.each((index, element) => {
      let name = $(element).attr('name');
      let value = $(element).val();
      formData[name] = value;
  });
  return formData;
}

HTML代码 #

<div class="card fit-content px-1 py-2 position-absolute top-0 left-0 card-title-form">
    <form action="" method="post" class="task-title-form">
        <input type="number" name="stage_id" class="form-control" value="{{$stage->id}}" hidden>
        <input type="number" name="project_id" class="form-control" value="{{$project->id}}" hidden>
        <input type="text" name="csrf-token" class="form-control" value="{{csrf_token()}}" hidden>
        <input type="text" name="task_title" class="form-control" id="card-title" placeholder="Enter a title for this card...">
        <div class="my-2">
            <button class="btn btn-primary add-card">Add</button>
            <span class="btn font-14 close-title-form"><ion-icon name="close-outline"></ion-icon></span>
        </div>
    </form>
</div>

已尝试但无效的解决方案 #

• 检查元素是否存在多个事件监听器
• 将<span>改为<button>
• 使用$(elem).one('click')绑定事件
• 通过ID调用元素

可行的排查与解决方向 #

1. 检查jQuery是否重复引入：打开浏览器控制台输入jQuery.fn.jquery，若输出多个版本或页面源码中多次引入jQuery，会导致事件重复绑定，需只保留一次引入。
2. 明确按钮类型：给提交按钮添加type="button"，避免浏览器默认将其识别为submit按钮触发表单默认提交，与AJAX提交形成两次请求：

   <button type="button" class="btn btn-primary add-card">Add</button>
   

3. 优化CSRF令牌处理：改用Laravel默认的meta标签存储令牌，避免手动处理字段时的潜在冲突。在页面头部添加：

   <meta name="csrf-token" content="{{ csrf_token() }}">
   

   然后在AJAX全局配置中统一设置请求头，无需每次单独传递：

   $.ajaxSetup({
       headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
   });
   

4. 避免事件重复绑定：若表单为动态生成，使用事件委托并先解绑再绑定，确保只绑定一次：

   $(document).off('click', '.add-card').on('click', '.add-card', function(e) {
       // 原有逻辑
   });
   

5. 排查浏览器扩展干扰：切换到浏览器隐身模式测试，排除调试工具、广告拦截等插件重复发送请求的可能。

内容的提问来源于stack exchange，提问作者Jahangir Shah