如何获取HTML contenteditable元素值，通过AJAX传给PHP实现失焦自动存库

1 前置修正：现有HTML问题 #

你的隐藏用户ID的input标签语法有错误，修正后如下，同时给所有可编辑元素增加统一类editable-field方便批量事件绑定：

<label id="firstLabel" class="editable-field" contenteditable="true">Hello</label>
<table id="firstTable">
  <!-- 修正了input闭合和PHP输出的语法错误 -->
  <input type="hidden" name="userId" id="userid" value="<?php echo $userId; ?>">
  <tr>
     <td id="firstRow" name="firstRow" class="editable-field" contenteditable="true">This is first row</td>
  </tr>
</table>
<div class="footer" id="footer" class="editable-field" contenteditable="true">Bottom message</div>

2 原生JS+Fetch实现自动提交 #

直接在页面底部加入以下代码，无需引入第三方依赖：

// 获取所有可编辑元素
const editableFields = document.querySelectorAll('.editable-field');
// 防抖计时器，避免频繁发送请求
let debounceTimer = null;

// 给每个元素绑定事件
editableFields.forEach(field => {
  // 存储元素初始值，用于判断是否真的修改了内容
  field.dataset.originalValue = field.innerText;

  // 监听失焦事件
  field.addEventListener('blur', () => {
    // 清除之前的防抖计时器
    clearTimeout(debounceTimer);

    debounceTimer = setTimeout(() => {
      const currentValue = field.innerText;
      // 内容没变化就不发请求
      if (currentValue === field.dataset.originalValue) return;

      // 收集要提交的参数
      const params = {
        field_id: field.id, // 字段ID，后端用来区分是哪个元素的内容
        content: currentValue,
        user_id: document.getElementById('userid').value
      };

      // 发送POST请求到你的PHP后端接口，替换成你自己的后端地址
      fetch('/save_content.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          // 如果后端接收JSON格式就改成下面这个：
          // 'Content-Type': 'application/json'
        },
        // 对应上面的Content-Type，用表单格式就转成x-www-form-urlencoded
        body: new URLSearchParams(params).toString()
        // 如果用JSON格式就用JSON.stringify(params)
      })
      .then(response => response.json()) // 假设后端返回JSON格式结果
      .then(res => {
        // 提交成功后更新原始值，避免下次失焦重复提交
        field.dataset.originalValue = currentValue;
        // 这里可以加成功提示，比如修改元素边框闪一下，或者toast提示
        console.log('保存成功', res);
      })
      .catch(err => {
        console.error('保存失败', err);
        // 这里可以加失败提示，比如恢复原始内容或者提示用户重试
      });
    }, 300); // 失焦后300ms再提交，防止频繁切换焦点导致重复请求
  });
});

3 注意事项 #

• 如果需要保留用户输入的富文本格式，把代码里所有的innerText替换成innerHTML即可
• 后端接收参数时一定要做XSS过滤和内容校验，避免恶意内容存入数据库
• 如果你的项目已经引入了jQuery，也可以用$.post方法替换fetch逻辑，语法更简洁

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