使用Ajax PUT请求更新页面内容，避免重复条目并实现内容替换

我正在通过Ajax PUT请求结合用户表单提交，用包含姓名、邮箱和技能熟练度的字符串更新现有页面。请问当用户意外重复提交相同信息，或想要更新技能等级时，能否在页面中实现该字符串的搜索与替换？

代码片段：

function makeJSON() { 
  var users_name = document.getElementById("users_name").value; 
  var email = document.getElementById("email").value;
  // 假设这里还有技能熟练度的获取逻辑
  // ...
}

当然可以搞定这个需求！其实核心就是先精准定位页面里的用户信息条目，再区分重复提交和更新操作来处理，下面给你具体的思路和代码示例：

1. 给用户信息条目添加唯一标识 #

首先，页面中展示用户信息的元素需要一个唯一标记，比如用邮箱作为data属性（毕竟邮箱是用户的唯一标识），这样后续能快速找到对应条目：

<!-- 示例：页面中已有的用户信息条目 -->
<div class="user-entry" data-user-email="alice@example.com">
  姓名：Alice | 邮箱：alice@example.com | 技能熟练度：高级
</div>

2. Ajax请求成功后处理页面更新 #

当PUT请求返回成功后，不要直接追加新内容，而是先检查页面中是否存在该用户的条目，再分情况处理：

// 处理请求成功后的页面更新逻辑
function updateUserPage(userData) {
  // 构建要展示的用户信息字符串
  const displayStr = `姓名：${userData.name} | 邮箱：${userData.email} | 技能熟练度：${userData.skillLevel}`;
  // 通过唯一标识定位现有条目
  const existingEntry = document.querySelector(`.user-entry[data-user-email="${userData.email}"]`);

  if (existingEntry) {
    // 情况1：重复提交（内容完全一致）
    if (existingEntry.textContent.trim() === displayStr.trim()) {
      alert("你已经提交过一模一样的信息啦，无需重复操作！");
      return;
    }
    // 情况2：更新技能等级（内容有变化）
    existingEntry.textContent = displayStr;
    alert("技能等级已成功更新！");
  } else {
    // 情况3：新用户，添加新条目到页面
    const newEntry = document.createElement('div');
    newEntry.className = 'user-entry';
    newEntry.dataset.userEmail = userData.email;
    newEntry.textContent = displayStr;
    document.getElementById('user-container').appendChild(newEntry);
  }
}

3. 整合到你的现有代码中 #

把上面的逻辑和你的makeJSON函数结合，完整的流程大概是这样：

function makeJSON() { 
  var users_name = document.getElementById("users_name").value; 
  var email = document.getElementById("email").value;
  var skillLevel = document.getElementById("skill-level").value; // 假设你有这个输入框

  const userData = {
    name: users_name,
    email: email,
    skillLevel: skillLevel
  };

  // 发送Ajax PUT请求
  fetch('/your-api-url', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(userData)
  })
  .then(res => res.json())
  .then(() => {
    // 请求成功后更新页面
    updateUserPage(userData);
  })
  .catch(err => {
    console.error('更新失败:', err);
    alert('更新出错了，请稍后再试');
  });
}

4. 额外优化：提交前本地校验（可选） #

为了减少不必要的API请求，还可以在用户点击提交时先做本地校验，提前判断是否是重复提交：

function checkDuplicate() {
  const email = document.getElementById("email").value;
  const skillLevel = document.getElementById("skill-level").value;
  const existingEntry = document.querySelector(`.user-entry[data-user-email="${email}"]`);

  if (existingEntry) {
    // 提取现有技能等级
    const currentSkill = existingEntry.textContent.split('技能熟练度：')[1].trim();
    if (currentSkill === skillLevel) {
      alert("当前技能等级已经是最新的啦，不用重复提交哦！");
      return false; // 阻止提交
    }
  }
  return true; // 允许提交
}

然后给提交按钮绑定这个校验：

<button onclick="if(checkDuplicate()) makeJSON()">提交更新</button>

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