从可编辑的 HTML 内容中获取值，将这些值传递给 Javascript 并使用 AJAX 发送到 PHP 文件 [重复]答案

【问题标题】：Getting values from HTML Content Editable, passing those values to Javascript and use AJAX to send to PHP file [duplicate]从可编辑的 HTML 内容中获取值，将这些值传递给 Javascript 并使用 AJAX 发送到 PHP 文件 [重复]
【发布时间】：2021-11-29 10:07:43
【问题描述】：

我的 html 文件中有不同的可编辑内容。我有几个标签，还有几个内容可编辑的表格。

我想在用户聚焦后将信息发送到数据库，没有按钮来触发操作。

这是我的 html 的一部分：

<label id="firstLabel" contenteditable="true">Hello</label>
<table id="firstTable">
  <input type="hidden" name="userId" id="userid" value="<?php echo $userId ?">
  <tr>
     <td id="firstRow" name="firstRow" contenteditable="true">This is first row</td>
  </tr>
</table>
<div class="footer" id="footer" contenteditable="true">Bottom message</div>

我是编程新手，我正在尝试找出获取内容可编辑信息并将其发送到我的数据库的最佳方法。我知道我必须使用 Javascript、Ajax，并根据我研究的信息将其发送到 PHP 文件。 PHP 部分对我来说不是问题，但我需要一些关于 Javascript 和 AJAX 部分的帮助，因为到目前为止我尝试的一切都没有检索到任何结果。

谢谢。

【问题讨论】：

仅供参考~name 属性不适用于td 元素
感谢 td 的澄清。如果我的 html 内容经过一个 while 循环，则 userid 总是得到 1 的值（这是数据库中的第一个 id）。它忽略所有其他值。
好的 - 这个问题没有提到循环和多条记录。因此，在blur 事件处理程序中，您必须使用event.target 和合适的parent/child/sibling 类型选择器来查找具有该特定记录/行的用户ID 的输入元素。事实上，第一个和最后一个 contenteditable 区域似乎只有body 作为parentNode，这使您的任务更加困难。 jQuery 有一些方法可以根据我相信的一些标准来查找最近的元素。如果您要将此处显示的所有 HTML 元素分组到一个 SPAN 中会更容易。

标签： javascript php html ajax contenteditable

【解决方案1】：

如何执行此操作的一个简单示例可能是分配一个blur 事件侦听器，该事件侦听器绑定到所有设置了contenteditable 属性的元素，并使用fetch api 使用FormData object 将AJAX 请求发送到您的后端 PHP 脚本。

const getparent=(e)=>{
  let n=e.target;
  while(n.tagName.toLowerCase()!='span' && n.className!='record'){
    if(n.tagName=='BODY')return false;
    n=n.parentNode;
  }
  return n;
}

document.querySelectorAll('[contenteditable="true"]').forEach(el=>{
  el.addEventListener('blur',function(e){
    let span=getparent(e);
    if( !span )return;

    let fd=new FormData();
        fd.set('userid', span.querySelector('[name="userId"]').value );
        fd.set('text', this.textContent );
        fd.set('id', this.id );

    fetch( 'https://www.example.com', { method:'post', body:fd, mode:'cors' })
      .then( r=>r.text() )
      .then( text=>{
        console.log( 'Do something with returned response: %s',text )
      })
  })
})

.record{
  display:block;
  margin:1rem;
  border:1px solid red;
  padding:1rem;
}

<span class='record'>
  <label id="label-1" contenteditable="true">Hello World</label>
  <table>
    <input type="hidden" name="userId" value="123456789">
    <tr>
       <td id="row-1" name="firstRow" contenteditable="true">This is first row</td>
    </tr>
  </table>
  <div class="footer" contenteditable="true">A message from the Bottom</div>
</span>


<span class='record'>
  <label id="label-2" contenteditable="true">World Hello</label>
  <table>
    <input type="hidden" name="userId" value="987654321">
    <tr>
       <td id="row-2" name="secondRow" contenteditable="true">This is second row</td>
    </tr>
  </table>
  <div class="footer" contenteditable="true">A bottom from the Message</div>
</span>

【讨论】：

感谢两位带我走向正确的方向。对于 Abronsius 教授，我如何也传递隐藏的值？
这确实从根本上改变了您可能需要采用的方法，因为这些contenteditable 元素不再是"standalone"，正如问题中"I want to send the info to a database after user focus out" 评论所建议的那样。两个contenteditable 元素是否要与userid 单独添加，还是应该只有1 个insert 使用所有信息？？
如果用户更改了 firstRow 元素，我需要同时发送 firstRow 值和 userid 隐藏值，这样我才能在数据库中进行更改。为了回答您的问题，我正在寻找要使用用户 ID 单独添加的 contenteditable 元素。如果我理解得很好，您的第二种方法可能需要一个按钮，但我不需要一个按钮，我需要在用户关注时立即将信息发送到数据库。
如果userid 与我认为的contenteditable 元素中的任何一个一起发送，那将是最简单的 - 你可以决定在服务器级别忽略。
Abronsius 教授，非常感谢您！我了解了父节点的工作原理、跨度标记以及使用 AJAX 获取值。我非常感激。希望这可以帮助像我一样遇到同样问题的其他人。

【解决方案2】：

这不是一个“开箱即用”的答案，而是一个骨架：你可以监听一个失去焦点的元素，即用户不再输入它。

let edit = document.getElementById("firstRow");

edit.addEventListener("blur", function(e) {
  console.log("You can send to php");
  // please have a look here for ajax : https://developer.mozilla.org/fr/docs/Web/Guide/AJAX
});

<label id="firstLabel" contenteditable="true">Hello</label>
<table id="firstTable">
  <input type="hidden" name="userId" id="userid" value="<?php echo $userId ?">
  <tr>
    <td id="firstRow" name="firstRow" contenteditable="true">This is first row</td>
  </tr>
</table>
<div class="footer" id="footer" contenteditable="true">Bottom message</div>

【讨论】：