客户端与服务端集成异常：textarea值更新提交不一致问题

核心问题根源 #

你的代码存在异步请求时序冲突：点击div后，你立刻显示弹窗，但获取数据的AJAX请求是异步执行的。如果用户在AJAX请求返回前就编辑了textarea并关闭弹窗，此时AJAX的success回调才会触发，将input.value覆盖为数据库返回的旧数据，最终导致/update接口发送的是旧值，而非用户实际编辑的内容。

另外，快速连续点击多个div时，closeButton的class会被多次叠加，可能导致后续提取id时出错，间接引发数据不匹配。

修复方案 #

1. 调整异步逻辑顺序：将弹窗显示操作移到AJAX请求的success回调内，确保只有拿到最新数据后才允许用户编辑，避免旧数据覆盖用户输入。
2. 添加请求锁：防止用户在请求未完成时重复点击，避免多请求冲突。
3. 优化id存储方式：改用data-*属性存储id，替代依赖class提取的不可靠方式。

修改后的客户端代码 #

// 新增请求锁，避免重复触发请求
let isFetching = false;

$(".radius").on("click", function(event) {
  if (isFetching) return;
  isFetching = true;

  // 改用data-id属性获取id，更可靠
  const num = parseInt($(this).data("id"));
  const toadd = "close-button" + num;
  closeButton.classList.add(toadd);

  $.ajax({
    type: "POST",
    url: "/fetch",
    async: true,
    data: JSON.stringify({ id: num }),
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    success: function(result) {
      input.value = result.text;
      // 拿到数据后再显示弹窗
      modal.classList.toggle("show-modal");
      isFetching = false;
    },
    error: function(result) {
      console.log("error");
      isFetching = false;
    }
  });
});

function toggleModal1(event) {
  const s1 = closeButton.classList[closeButton.classList.length - 1];
  const st = s1.substring(12);
  closeButton.classList.remove(s1);
  const num = parseInt(st);

  console.log(input.value);
  $.ajax({
    type: "POST",
    url: "/update",
    data: JSON.stringify({ id: num, text: input.value }),
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    success: function(result) {},
    error: function(result) {
      console.log("error");
    }
  });
  modal.classList.toggle("show-modal");
}

配套HTML调整 #

将div的class存储id改为data-id属性：

<!-- 原写法 -->
<div class="radius close-button123"></div>
<!-- 修改后 -->
<div class="radius" data-id="123"></div>

额外优化建议 #

• 服务端/update接口需返回响应，否则客户端AJAX会因超时触发错误：

app.post("/update", function(req, res) {
  Fruit.updateOne({ id: req.body.id }, { text: req.body.text }, function(err, docs) {
    if (err) {
      console.log(err);
      res.status(500).send({ status: "error" });
    } else {
      console.log("Updated Docs : ", docs);
      res.send({ status: "success" });
    }
  });
});

• 弹窗关闭时清空textarea内容，避免下次打开时残留旧数据。

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