我创建了自己的“喜欢”按钮。使用 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><?phpfunction postcommentbar($imagenumber, $likes, $num_rows){ }?>我希望能够单击页面上的任何“喜欢”按钮，并看到它随着“喜欢”数量的增加而相应更新。您能否告诉我如何实现这一目标？我在发送前有onload。如果您查看代码，您会看到这一点。
2 回答
森栏
TA贡献1810条经验 获得超5个赞
正如您建议的那样，您使用图像编号作为标识符。我已经更新了我的代码，这应该适用于您的代码。
我已经实现了 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>";
}
?>
这段代码在我的最后不会产生任何语法错误。
潇湘沐
TA贡献1816条经验 获得超6个赞
您是否有多个带有多个类似按钮的表单？如果是，那么您不能对多个表单使用相同的 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，您可以进一步使用它来操作按钮值。
我还将输入 type="submit" 更改为 type="button"，这不会重新加载页面，我们不必使用 event.preventDefault。
收到响应后，您可以进一步处理所需的功能。
- 2 回答
- 0 关注
- 209 浏览
添加回答
举报
0/150
提交
取消