为什么只有第一次点击会增加投票计数器,但其他人不会?

时间:2017-07-08 09:19:26

标签: javascript php mysql ajax

代码的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。 (vote.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页面中也会更新。但是,再次点击相同的符号不会将投票数增加到两个。为什么呢?

1 个答案:

答案 0 :(得分:4)

原因是在你的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++;

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