从HTML内容可编辑获得值,这些值传递给使用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

如何做到这一点的一个简单的例子可能是分配一个blur事件监听器绑定到所有元素的contenteditable属性集和使用fetch api发送AJAX请求使用FormData对象到你的后端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>

Answer 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>