AJAX POST提交表单时数据在JSON文件中重复存储两次问题求助

第一步：先定位问题发生的环节 #

打开浏览器开发者工具的「网络」面板，提交一次表单，查看/create-article请求的发送次数：

• 如果出现2条请求记录：问题出在前端逻辑
• 如果只有1条请求记录：问题出在后端逻辑

前端问题常见原因及修复方案 #

1. 事件重复绑定
   你使用了$(document).on()的事件委托方式绑定点击事件，这类绑定会累加不会覆盖，如果JS代码被重复加载（比如页面多次引入同一份JS文件、单页应用路由切换未销毁事件），一次点击就会触发多次回调，发送多次请求。
   修复方案：绑定事件前先解绑旧的绑定：

$(document).off('click', '#json-form-submit').on('click', '#json-form-submit', function(e) {
  // 原有逻辑
})

也可以改成直接绑定表单的submit事件，覆盖按钮点击、回车提交等所有场景，更稳妥：

$(document).on('submit', '#json-form', function(e) {
  e.preventDefault()
  // 原有逻辑
})

2. 未定义变量导致逻辑异常
   你前端构造data对象时，用到了未声明的related变量，会抛出引用错误，可能导致逻辑异常执行多次。要么删除这个多余字段，要么补充related变量的赋值逻辑。

后端问题常见原因及修复方案 #

1. 接口未返回响应触发重试
   你当前的后端接口处理完写入逻辑后，没有给前端返回任何响应，请求会一直处于挂起状态，部分浏览器、反向代理（如Nginx）会在超时后自动重试请求，导致二次写入。
   修复方案：写入完成后主动返回响应：

app.post('/create-article', (req, res) => {
  // 原有逻辑
  fs.writeFileSync('./public/files/js/articles.json', JSON.stringify(jsonObject));
  // 新增返回响应逻辑
  res.status(200).json({ status: 'success' })
})

2. 并发读写导致数据重复
   你当前直接用同步读写JSON文件的方式，没有加锁，如果同时有两个请求进入，会出现两次读取的是同一个旧版本JSON，分别push数据后写入，大概率出现重复数据。如果访问量稍高建议换成轻量数据库（如SQLite）存储，一定要用JSON文件的话可以引入proper-lockfile这类库做文件读写锁，避免并发问题。

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