我创建了自己的“喜欢”按钮。使用AJAX，我可以将更改发布到数据库，以将1添加到“喜欢”按钮。然后，JavaScript将使用更新后的信息来更新第一个“赞”按钮。如果再次单击“赞”，它将不会再次更新。另外，其他“喜欢”按钮也无法正常工作，它们只会刷新页面。
我已经四处搜寻，试图找到答案。我已经将其归结为每个都有自己喜欢的按钮的地方。即使我将按钮的ID传递到AJAX并从服务器传递回JavaScript。我仍然无法更新其他“喜欢”按钮。只有第一个，只有一次。
<html>
<script>
window.addEventListener("load", function () {
function sendData() {
var XHR = new XMLHttpRequest();
// Bind the FormData object and the form element
var FD = new FormData(form);
XHR.onload = () =>{
var response
try{
response = JSON.parse(XHR.responseText);
}catch (e){
console.error('no parse');
}
if(response){
handleresponse(response);
}
}
// Set up our request
XHR.open("POST", "likes.php");
// The data sent is what the user provided in the form
XHR.send(FD);
}
// Access the form element...
var form = document.getElementById("likesform");
// ...and take over its submit event.
form.addEventListener("submit", function (event) {
event.preventDefault();
sendData();
});
});
function handleresponse(response){
console.log(response.message);
let value = response.message;
let id = response.id;
console.log(id);
document.getElementById(id).value = "Liked " + value;
value = 0;
id = 0;
}
</script><?php
function postcommentbar($imagenumber, $likes, $num_rows){
echo "<div id='postcommentbar'>";
echo "<form id='likesform' ><input type='hidden' name='imagenumber' value='".$imagenumber."'><input type='hidden' name='like' value='Like'><input type='hidden' name='likes' value='".$likes."'><input type='submit' class='likebutton' id='".$imagenumber."' value='Like ".$likes."'></form>";
echo "<form action='comments.php' method='POST'><input type='hidden' name='imagenumber' value='".$imagenumber."'><input id='commentbutton' type='submit' name='comment' value='Comment ".$num_rows."'></form>";
echo "</div>";
$num_rows = 0;
}
?>
我希望能够单击页面上的任何“喜欢”按钮，并看到它随着“喜欢”数量的增加而相应更新。
请问我如何实现这一目标？
我在发送前已加载。如果您看一下代码，就会发现这一点。
答案 0 :(得分：0)
您是否有多个带有多个类似按钮的表格？ 如果是，则不能对多个表单使用相同的ID.ID在DOM中必须唯一。那是您的代码的第一个问题。
第二件事是当您通过ajax发送数据时，由于表单名称相同，它将始终考虑ID为“ likesform”的最后一个表单数据，因为您使用的是静态ID，这是第二个问题。
无论如何，仅当您在一个页面上有多个表单，并且我确实认为您有多个表单时，此问题才有意义。
现在解决您的问题。
为什么在渲染元素时可以向元素本身添加onclick函数，为什么要使用事件侦听器？除非您出于某种目的而这样做，否则除非您这么做！
看看下面的代码。
function sendData(id, form_id){
console.log("Called");
var XHR = new XMLHttpRequest();
var form = document.getElementById(form_id);
var FD = new FormData(form);
XHR.onload = () =>{
var response
try{
response = JSON.parse(XHR.responseText);
}catch (e){
console.error('no parse');
}
if(response){
handleresponse(response);
}
}
// Set up our request
XHR.open("POST", "likes.php");
// The data sent is what the user provided in the form
XHR.send(FD);
}
function handleresponse(response){
console.log(response.message);
let value = response.message;
let id = response.id;
console.log(id);
document.getElementById(id).value = "Liked " + value;
value = 0;
id = 0;
}<body>
<div>
<form id='likesform' ><input type='hidden' name='imagenumber' value='"asdadddd"'><input type='hidden' name='like' value='Like'>
<input type='hidden' name='likes' value='adas'><input type='button' class='likebutton' id='id1' value='Like' onclick="sendData('id1','likesform')">
</form>
</div>
<div>
<form id='likesform1' ><input type='hidden' name='imagenumber' value='"asdadddd"'><input type='hidden' name='like' value='Like'>
<input type='hidden' name='likes' value='adas'><input type='button' class='likebutton' id='id2' value='Like' onclick="sendData('id2','likesform1')">
</form>
</div>
<div>
<form id='likesform2' ><input type='hidden' name='imagenumber' value='"asdadddd"'><input type='hidden' name='like' value='Like'>
<input type='hidden' name='likes' value='adas'><input type='button' class='likebutton' id='id3' value='Like' onclick="sendData('id3','likesform2')">
</form>
</div>
</body>
代码解释。 我删除了onload eventListener，因为无需在侦听器内添加函数。
这是因为函数已编译并且仅在调用它们时运行，因此没有风险在DOM或任何元素呈现之前被调用。
我创建了多个具有不同ID的表单和按钮，然后将其作为参数提供给sendData函数。
然后使用该参数的ID从相关表单中提取数据。您还可以单击按钮的ID，您可以将其进一步用于操纵按钮的值。
我还将输入类型=“ submit”更改为type =“ button”，这将不会重新加载页面，我们将不必使用event.preventDefault。
收到回复后，您可以进一步处理所需的功能。
希望这会有所帮助
谢谢
答案 1 :(得分：0)
正如您所建议的那样，您使用图像编号作为标识符。我已经更新了我的代码，这应该可以与您的代码一起使用。
我已经实现了php代码来动态生成数字并将其绑定为唯一的名称，然后将其发送到sendData函数。此代码在我的一端执行得很好。
如果有帮助，请看看
<body>
<?php
for($i=1;$i<=3;$i++){
?>
<div>
<form id='likesform<?= $i ?>' ><input type='hidden' name='imagenumber' value='imagenumber<?= $i ?>'><input type='hidden' name='like' value='Like'>
<input type='hidden' name='likes' value='adas'><input type='button' class='likebutton' id='imagenumber<?= $i ?>' value='Like' onclick="sendData('likesform<?= $i ?>')">
</form>
</div>
<?php
}
?>
</body>
<script type="text/javascript">
function sendData(form_id){
var XHR = new XMLHttpRequest();
var form = document.getElementById(form_id);
var FD = new FormData(form);
XHR.onload = () =>{
var response
console.log(XHR.responseText);
try{
response = JSON.parse(XHR.responseText);
}catch (e){
console.error('no parse');
}
if(response){
handleresponse(response);
}
}
// Set up our request
XHR.open("POST", "likes.php");
// The data sent is what the user provided in the form
XHR.send(FD);
}
function handleresponse(response){
// console.log(response.message);
let value = response.message;
let id = response.id;
console.log(id);
document.getElementById(id).value = "Liked " + value;
value = 0;
id = 0;
}
</script>
我还创建了一个名为“ likes.php”的文件。这是我从文件发送的输出，并在其中附加了DOM。
<?php
echo json_encode(array('message' => 1, 'id' => $_POST['imagenumber']));
?>
用下面的代码更新您的函数。我对您的html绑定进行了一些更改。问题是您没有正确地转义引号。 尝试使用此功能，它将起作用。
<?php
function postcommentbar($imagenumber, $likes, $num_rows){
echo "<div id='postcommentbar'>"; echo "<form id='".$imagenumber."' ><input type='hidden' name='imagenumber' value='".$imagenumber."'><input type='hidden' name='like' value='Like'><inputtype='hidden' name='likes' value='".$likes."'><input type='button' class='likebutton' id='".$imagenumber."' onclick=\"sendData('$imagenumber')\" value='Like ".$likes."'></form>";
}
?>
此代码最终不会产生任何语法错误。
希望这会有所帮助
谢谢