多次点击按钮后jQuery Ajax返回405错误的排查求助

1. 阻止按钮/表单的默认提交行为 #

如果触发Ajax的按钮是<button type="submit">或嵌套在<form>标签内，点击时可能同时触发浏览器默认的表单提交（默认用GET方法），尤其是快速多次点击时，默认提交会和Ajax请求冲突，导致后续请求被意外转为GET。

解决：在按钮点击事件开头添加阻止默认行为的代码

$("#btn_processar").click(function(event) {
  event.preventDefault(); // 阻止浏览器默认提交行为
  // 你的Ajax代码
});

2. 修复表单数据拼接的分隔符问题 #

你直接拼接两个表单的序列化结果，会出现参数无分隔符的情况（比如a=1b=2），导致服务器无法正确解析参数，进而触发路由匹配错误，返回方法不允许的提示。

解决：在两个序列化结果之间添加&分隔符

data: $(form).serialize() + "&" + $("#form_processar_expedicao").serialize(),

3. 调整按钮禁用时机 #

你当前仅在Ajax成功后恢复按钮可用，点击时未立即禁用，可能导致用户快速多次点击发送重复请求，服务器端因请求冲突返回异常。

解决：点击后立即禁用按钮，成功/失败后再恢复

$("#btn_processar").click(function(event) {
  event.preventDefault();
  const $btn = $(this);
  $btn.prop('disabled', true); // 点击后立即禁用

  $.ajax({
    // ... 你的Ajax配置
    success: function(data) {
      // ... 原有成功逻辑
      $btn.prop('disabled', false);
    },
    error: function() {
      $btn.prop('disabled', false); // 出错也要恢复按钮可用
    }
  });
});

4. 检查init_form()函数的事件绑定 #

成功回调里调用的init_form()如果重复绑定按钮点击事件，会导致每次执行后多一个事件处理程序，多次点击触发多请求冲突。

解决：绑定事件前先解绑原有事件

function init_form() {
  // ... 其他初始化逻辑
  $("#btn_processar").off('click').click(function(event) {
    event.preventDefault();
    // 点击事件逻辑
  });
}

5. 确认Laravel路由定义 #

检查路由文件，确保目标路由明确定义为POST方法，避免被同名GET路由覆盖

Route::post('/controle/kanban/comercial/bipagem/processar', [YourController::class, 'processar'])->name('controle.kanban.comercial.bipagem.processar');

内容的提问来源于stack exchange，提问作者Ricardo Afonso