javascript - 为什么只有第一次点击会增加投票计数器，而其他点击则不会？

Question

代码的php部分:

 //the JS part
 echo "<script>
  function increasevotes(e,location,user,date,vote)
  {
    e.preventDefault();
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
            e.target.parentNode.previousSibling.textContent=this.responseText;
            }
        };
    xmlhttp.open(\"GET\", \"vote.php?location=\" + location + \"&user=\"+ user +\"&date=\"+date+\"&vote=\"+vote, true);
    xmlhttp.send();
  }
  </script>"
//the HTML part
echo "<span class=\"right nolikes\">{$rows['vote']}</span>
<a href=\"\" onclick=\"increasevotes(event,'{$rows['title']}','{$rows['username']}','{$rows['date']}','{$rows['vote']}')\">
<img src=\"img/like.png\" class=\"right\" width=\"30\" height=\"30\"/>
</a>"

AJAX 调用中使用的 php。 (投票.php)

<?php
    include("configure.php");
    $location = $_REQUEST["location"];
    $username = $_REQUEST["user"];
    $date = $_REQUEST["date"];
    $vote=$_REQUEST["vote"]+1;
    $query="UPDATE journals SET vote={$vote} WHERE title='".$location."' AND username='".$username."' AND date='".$date."'";
    $qresult=mysqli_query($conn,$query);
    echo $vote;
?>

问题:

最初，数据库包含的投票为零。因此，显示类似图像和 0。当我点击喜欢的图片时，数据库中的投票增加了 1，并且在 html 页面中也更新了。但是，再次点击赞符号不会将投票计数增加到二。为什么？

Answer 1

原因是在你的 JS 回调中你只更新了

的文本

<span class="right nolikes">{$rows['vote']}</span>

用这一行:

e.target.parentNode.previousSibling.textContent=this.responseText;

但是你还需要更新onclick部分的投票数:

<a href="" onclick="increasevotes(event,'{$rows['title']}','{$rows['username']}','{$rows['date']}','{$rows['vote']}')"> 
here it still uses old vote number 

我建议您在 SQL 和 PHP 部分执行此操作，而不是将当前投票数传递给 PHP。所以在你的 php 部分不要使用 $vote=$_REQUEST["vote"]+1; 这样做:

$query="UPDATE journals SET vote=vote+1 WHERE title='".$location."' AND username='".$username."' AND date='".$date."'";

然后要更新值，您可以快速执行或等到回调但将其更改为:

var oldVote = parseInt(e.target.parentNode.previousSibling.textContent); 
e.target.parentNode.previousSibling.textContent= oldVote++;

还有更多方法可以解决此问题，但我认为这可能对您有所帮助。