从 HTML Content Editable 获取值，将这些值传递给 Javascript 并使用 AJAX 发送到 PHP 文件

Question

我的 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 部分的帮助，因为到目前为止我尝试的一切都没有检索到任何结果。

谢谢。

Answer 1

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

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>

Answer 2

如何执行此操作的一个简单示例可能是分配一个 blur 事件侦听器绑定到所有设置了 contenteditable 属性的元素，并使用 fetch api to send the AJAX request using a FormData object 到您的后端 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>

从 HTML Content Editable 获取值，将这些值传递给 Javascript 并使用 AJAX 发送到 PHP 文件

Getting values from HTML Content Editable, passing those values to Javascript and use AJAX to send to PHP file

javascript

php

html

ajax

contenteditable