测验页面Ajax提交用户名与分数时重复插入数据问题求助

兄弟，这种重复插入的坑我之前踩过好几次，大概率是前端触发了两次请求导致的，咱们一步步排查解决：

1. 先查事件绑定是否重复 #

最常见的情况是你的提交按钮（或者触发Ajax的元素）被绑定了多次点击事件。比如你在$(document).ready()里绑了一次，又在某个弹窗回调、页面刷新逻辑里重复绑定，结果点击一次触发两次请求。

解决办法：

• 绑定事件前先解绑，避免重复绑定：

  $('#submitBtn').off('click').on('click', function() {
    // 你的Ajax提交代码
  });
  

• 或者用one()代替on()，确保事件只触发一次：

  $('#submitBtn').one('click', function() {
    // 你的Ajax提交代码
  });
  

2. 排查是否有重复的触发元素 #

检查页面里是不是不小心复制了一份提交按钮/触发元素，比如两个相同id或class的按钮，点击时两个元素都触发了Ajax请求。

解决办法：

• 打开浏览器开发者工具（F12），用选择器搜索你的触发元素，看看是不是有多个匹配结果。
• 给触发元素加唯一标识，比如自定义属性data-submit="score"，用这个属性来绑定事件，避免误选。

3. 阻止默认行为和事件冒泡 #

如果你的Ajax是绑定在表单的submit事件上，一定要阻止表单的默认提交行为，不然浏览器会同时触发表单的默认提交和你的Ajax请求，直接导致两次插入。

解决办法：

$('form').on('submit', function(e) {
  e.preventDefault(); // 阻止表单默认提交
  e.stopPropagation(); // 阻止事件冒泡（可选）
  // 你的Ajax提交代码
});

4. 给Ajax加个"提交锁" #

有时候可能是代码逻辑里不小心重复调用了提交函数，比如在某个循环、定时器里多次触发。这时候可以加个全局锁，确保同一时间只有一个请求在执行。

解决办法：

let isSubmitting = false;
function submitScore() {
  if (isSubmitting) return; // 如果正在提交，直接返回
  isSubmitting = true;
  
  $.ajax({
    url: '你的提交接口地址',
    type: 'POST',
    data: {username: 'xxx', score: 90},
    success: function(res) {
      isSubmitting = false;
      // 处理成功逻辑
    },
    error: function(err) {
      isSubmitting = false;
      // 处理错误逻辑
    }
  });
}

5. 最后排查后端问题 #

如果上面的前端排查都没问题，那就要看看后端接口是不是接收一次请求却插入了两次数据。比如后端的路由被注册了两次，或者插入逻辑里有重复代码。

你可以用Postman或者浏览器开发者工具手动发送一次请求，看看后端会不会生成两条记录，如果会，那就是后端的问题了。

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