jQuery/AJAX POST请求偶发重复提交问题排查求助

问题根因及排查修复方案 #

• 1 优先排查事件监听器重复绑定问题
  你当前的submitLogByEntering函数每次执行都会给logContent输入框新增一个独立的keyup事件监听器，不会自动覆盖之前绑定的监听器。如果该函数在页面初始化、模态框打开、项目切换等场景下被多次调用，同一个输入框上会挂载多个相同的监听回调，按一次回车就会触发多次submitLog调用，自然会产生多次POST请求。
  修复方案：
  要么保证submitLogByEntering全局仅执行一次，要么绑定新监听器前先移除旧监听器：

function submitLogByEntering(){
  let log = document.getElementById('logContent');
  // 先移除已有的监听，避免重复绑定
  log.removeEventListener("keyup", enterHandler);
  log.addEventListener("keyup", enterHandler);
}
// 把回调抽成独立函数，方便移除
function enterHandler(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    submitLog();
  }
}

• 2 排查表单默认提交行为冲突
  如果输入框包裹在<form>标签内，keyup阶段的preventDefault无法阻止keydown阶段触发的表单默认提交行为，会出现「AJAX请求+浏览器默认表单提交」两次请求的情况，哪怕页面没有跳转也会导致数据重复插入。
  修复方案：给外层form绑定submit事件直接阻止默认行为：

// 替换为你实际的form选择器
document.querySelector('form').addEventListener('submit', e => e.preventDefault());

• 3 新增请求状态锁，兜底避免重复提交
  你当前submitLog里的提交按钮禁用逻辑，无法拦截回车触发的提交请求。可以新增全局请求状态标记，只要有未完成的提交请求就直接拦截后续触发：

let isSubmitting = false;
function submitLog(){
  // 已有提交请求在处理时直接返回
  if (isSubmitting) return;
  isSubmitting = true;

  let log = document.getElementById('logContent').value;
  let project = document.getElementById('logger_active_project').innerHTML;
  let category = document.getElementById('categorySelect').value;
  let projectID = document.getElementById('logger_active_project_id').value;
  let submit = document.getElementById('submit');
  submit.disabled = true;

  console.log('starting ajax post request');

  $.post('./includes/logger/scripts/add_log.php', {
      log:log,
      project:project,
      category:category,
      project_id:projectID

  }, function(data, status){
      document.getElementById('logContent').value= "";
      submit.disabled = false;
      console.log('ajax callback fired.' + data);
      // 请求结束后重置状态
      isSubmitting = false;
  })
}

• 4 特殊场景兼容
  部分第三方输入法、按键物理粘连的场景下可能会触发多次keyup事件，你可以把监听事件改为keydown，或者增加100ms左右的防抖处理，避免异常触发。

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