XMLHttpRequest::send重复发送POST请求的原因及解决方案

1. 先确认JavaScript是否重复加载/事件重复绑定 #

• 打开浏览器开发者工具（F12），切到Sources标签，页面加载时观察sendMessage所在的JS文件是否被加载多次。
• 在sendMessage开头加一行调试代码：console.log('sendMessage触发，时间戳:', Date.now())，点击按钮后查看控制台输出次数——如果是两次，说明函数被触发了两次，大概率是事件绑定重复。
• 检查HTML按钮：别同时使用onclick="sendMessage()"和JS代码里的addEventListener('click', sendMessage)，两种绑定方式会导致一次点击触发两次请求。

2. 排查事件冒泡/委托问题 #

• 如果按钮嵌套在其他可点击元素里，事件冒泡可能导致父元素的点击事件也触发sendMessage。可以在函数里加入阻止冒泡的代码：

function sendMessage(event) {
  event.preventDefault();
  event.stopPropagation();
  // 原有的XHR请求代码
}

• 注意使用addEventListener绑定时，要确保event参数正确传递给函数。

3. 检查Python服务器端逻辑 #

• 在do_POST方法开头添加日志打印：

from datetime import datetime
def do_POST(self):
    print(f"收到POST请求，时间: {datetime.now()}")
    # 原有的处理逻辑

观察服务器端是否收到两次请求，确认是客户端重复发送还是服务器端的问题。

• 检查do_POST内是否存在无意中触发客户端重试的逻辑，比如响应头设置错误导致浏览器重复发起请求。

4. 给XHR加防重复发送标记 #

• 如果是XHR被重复调用，给函数添加状态锁，防止同一时间多次发送：

let isRequesting = false;
function sendMessage() {
  if (isRequesting) return;
  isRequesting = true;
  
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/your-endpoint', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  
  xhr.onload = function() {
    isRequesting = false;
    // 处理响应逻辑
  };
  
  xhr.onerror = function() {
    isRequesting = false;
    // 处理错误逻辑
  };
  
  xhr.send('your-form-data');
}

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