我創(chuàng)建了自己的“喜歡”按鈕。使用 AJAX，我可以將更改發(fā)布到數(shù)據(jù)庫以將 1 添加到“喜歡”按鈕。然后 JavaScript 將使用更新的信息更新第一個(gè)“喜歡”按鈕一次。如果我再次單擊“喜歡”，它將不會(huì)再次更新。其他“喜歡”按鈕也不起作用，它們只會(huì)刷新頁面。我已經(jīng)到處搜索試圖找到這個(gè)答案。我已經(jīng)把它歸結(jié)為我有每個(gè)喜歡按鈕的地方，它有自己的 id。即使我將按鈕的 id 傳遞到 AJAX 并從服務(wù)器返回到 JavaScript。我仍然無法更新其他“喜歡”按鈕。只有第一個(gè)而且只有一次。<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){ }?>我希望能夠單擊頁面上的任何“喜歡”按鈕，并看到它隨著“喜歡”數(shù)量的增加而相應(yīng)更新。您能否告訴我如何實(shí)現(xiàn)這一目標(biāo)？我在發(fā)送前有onload。如果您查看代碼，您會(huì)看到這一點(diǎn)。
2 回答
森欄
TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超5個(gè)贊
正如您建議的那樣，您使用圖像編號(hào)作為標(biāo)識(shí)符。我已經(jīng)更新了我的代碼，這應(yīng)該適用于您的代碼。
我已經(jīng)實(shí)現(xiàn)了 php 代碼來動(dòng)態(tài)生成數(shù)字并將它們綁定以獲得唯一的名稱，然后將它們發(fā)送到 sendData 函數(shù)。這段代碼在我的最后執(zhí)行得很好。
請看看，如果這有幫助
<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>
我還創(chuàng)建了一個(gè)名為“l(fā)ikes.php”的文件。這是我從文件發(fā)送的輸出，并將其附加到 DOM。
<?php
echo json_encode(array('message' => 1, 'id' => $_POST['imagenumber']));
?>
使用以下函數(shù)更新您的函數(shù)。我對您的 html 綁定進(jìn)行了一些更改。問題是您沒有正確轉(zhuǎn)義引號(hào)。嘗試使用此功能，這將起作用。
<?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>";
}
?>
這段代碼在我的最后不會(huì)產(chǎn)生任何語法錯(cuò)誤。
瀟湘沐
TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超6個(gè)贊
您是否有多個(gè)帶有多個(gè)類似按鈕的表單？如果是，那么您不能對多個(gè)表單使用相同的 id。ID 在 DOM 中必須是唯一的。這是您的代碼的第一個(gè)問題。
第二件事是當(dāng)您通過 ajax 發(fā)送數(shù)據(jù)時(shí)，由于表單名稱相同，它將始終考慮 ID 為“l(fā)ikesform”的最后一個(gè)表單數(shù)據(jù)，因?yàn)槟褂玫氖庆o態(tài) ID，這是第二個(gè)問題。
無論如何，只有當(dāng)您在一個(gè)頁面上有多個(gè)表單時(shí)，這個(gè)問題才有意義，而且我認(rèn)為您有多個(gè)表單。
現(xiàn)在解決您的問題。
當(dāng)您可以在渲染元素期間向元素本身添加 onclick 函數(shù)時(shí)，為什么要使用事件偵聽器。直到并且除非您出于某種目的這樣做！
看看下面的代碼。
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>
代碼說明。我已經(jīng)刪除了 onload eventListener，因?yàn)椴恍枰趥陕犉髦刑砑雍瘮?shù)。
這是因?yàn)楹瘮?shù)已編譯并且僅在您調(diào)用它們時(shí)運(yùn)行，因此不存在在 DOM 或任何元素呈現(xiàn)之前調(diào)用它的風(fēng)險(xiǎn)。
我創(chuàng)建了多個(gè)具有不同 id 的表單和按鈕，然后將它們作為參數(shù)提供給 sendData 函數(shù)。
然后，該參數(shù)中的 id 用于從相關(guān)表單中提取數(shù)據(jù)。您還擁有被單擊按鈕的 id，您可以進(jìn)一步使用它來操作按鈕值。
我還將輸入 type="submit" 更改為 type="button"，這不會(huì)重新加載頁面，我們不必使用 event.preventDefault。
收到響應(yīng)后，您可以進(jìn)一步處理所需的功能。
- 2 回答
- 0 關(guān)注
- 182 瀏覽
添加回答
舉報(bào)
0/150
提交
取消