无法更新每个按钮，只有第一个按钮使用 JavaScript 和 AJAX 更新
我创建了自己的“喜欢”按钮。使用 AJAX，我可以将更改发布到数据库以将 1 添加到“喜欢”按钮。然后 JavaScript 将使用更新后的信息更新第一个“喜欢”按钮。如果我再次单击“喜欢”，它将不会再次更新。其他“喜欢”按钮也不起作用，它们只会刷新页面。
我已经到处搜索，试图找到这个问题的答案。我已经把它归结为我有每个喜欢按钮的地方，它有自己的 id。即使我将按钮的 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;
}
?>
我希望能够点击页面上的任何“喜欢”按钮，并看到它随着“喜欢”数量的增加而相应地更新。
你能告诉我如何实现这一目标吗？
我在发送之前已经加载。如果您查看代码，您就会看到这一点。
心有法竹2回答
-
阿晨1998
正如您建议您使用 imagenumber 作为标识符。我已经更新了我的代码，这应该适用于您的代码。我已经实现了 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 绑定进行了一些更改。问题是您没有正确转义引号。尝试使用此功能，这将起作用。<?phpfunction 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>";}?>这段代码最终不会产生任何语法错误。希望这可以帮助
随时随地看视频慕课网APP
相关分类
JavaScript