Question

在这个网站上，您可以制作带有姓名，标题和消息的帖子（就像一个简单的留言板），每个帖子都显示在页面上，默认评级为0.帖子ID自动递增已经存储在行中。

我要做的就是点击帖子上的向上或向下箭头，然后增加或减少帖子的评分。我现在的代码似乎听起来很合理，但它不起作用，我不知道为什么。

这是我的“加价”脚本：

<script>
    $(function () {
        $('.rateup').click(function() {
            var id = $(this).data('id');
            $.ajax({
                type: "POST",
                data: "id=" + id,
                url: "rateup.php"                               
            });
            location.reload();
        });
    });
</script>

您点击加价的链接看起来像这样（降价相同，所以我觉得不需要发布）：

<a class='rateup' href='index.php' data-id=' " . $row['id'] . " ' title='vote up'>&#9650;</a>

如果它有助于参考，这里是整个PHP部分，其中的帖子被抓取并回显到页面（数据库信息显然被审查）：

<?php
            $servername = "servername";
            $username = "username";
            $password = "password";
            $dbname = "posts";
            $tablename = "db_posts";

            $conn = new mysqli($servername, $username, $password, $dbname);
            if ($conn->connect_error) {
                die("failed to connect: " . $conn->connect_error); 
            }

            $sql = "SELECT id, rating, name, title, message, date, time FROM posts ORDER BY date DESC, time DESC";
            $result = $conn->query($sql);


            if ($result->num_rows > 0) {
                while($row = $result->fetch_assoc()) {
                    echo "<br><div id='messageBar'><b><a class='rateup' href='index.php' data-id=' " . $row['id'] . " ' title='vote up'>&#9650;</a> ";
                    echo $row["rating"];
                    echo " <a class='ratedown' href='index.php' title='vote down'>&#9660;</a> </b>";
                    echo "Posted by <b>";
                    echo htmlspecialchars($row["name"], ENT_QUOTES, 'UTF-8');
                    echo "</b> on ";
                    echo $row["date"];
                    echo " at ";
                    echo $row["time"];
                    if (!empty($row['title'])) {
                        echo " - <b>";
                        echo htmlspecialchars($row["title"], ENT_QUOTES, 'UTF-8');
                        echo "</b>";
                    }
                    echo "<span style='float: right'>#";
                    echo $row["id"];
                    echo "</span>";
                    echo "</div><div id='messageContent'>";
                    echo htmlspecialchars($row["message"], ENT_QUOTES, 'UTF-8');
                    echo "<br><br><span id='commentLink'><a class='noStyle' href=''>reply to this post&nbsp;</a></span>";
                    echo "<br></div><br><hr>";
                }
            } else {
                echo "<br>";
                echo "<center><i>it's dusty in here</i></center>";
                echo "<br>";
            }

            $conn->close();
        ?>

最后，这是rateup.php文件：

<?php
$servername = "servername";
$username = "username";
$password = "password";
$dbname = "posts";
$tablename = "db_posts";

// Connection to database
$connection=mysqli_connect("$servername","$username","$password","$dbname");
// Check connection
if (mysqli_connect_errno()) {
    echo 'NOT_OK';
    //echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

// Increasing the current value with 1
mysqli_query($connection,"UPDATE $tablename SET rating = (rating + 1) WHERE id = ' ".$id." ' ");

mysqli_close($connection);

echo 'OK';     ?>

如果有人可以帮忙解决这个问题，我会非常感激，过去两天我一直想弄清楚自己，所以这是我现在唯一的希望。

Answer 1

您在ajax请求完成之前刷新页面，这会导致请求取消：

在浏览器的开发者工具中查看您的网络标签。如果你很新鲜，你可能不会使用AJAX。只需发送一个帖子到页面，并获得更新的结果。

更新回复评论

有两种可能性：

1）将上/下投票作为表单按钮（根据需要设置样式），然后发送您的php文件，它将处理速率上/下，并返回更新的html视图。

2）在ajax调用之后不要刷新（也改变链接中的href，这样它也不会导致刷新）。在你的ajax成功功能中，如果你收到了“好”的话。来自rateup.php的响应，手动更改向上/向下的投票。（优选的解决方案）

所以：

<script>
    $(function () {
        $('.rateup').click(function() {
            var id = $(this).data('id');
            $.ajax({
                type: "POST",
                data: {id: id}, // In es2015 data: {id}
                url: "rateup.php",
                success: function(result) {
                    if (result === 'OK') {
                        var voteContainer = $(locate_the_element_with_the_vote_count);
                        var newVoteCount = parseInt(voteContainer.text()) + 1;
                        voteContainer.text(newVoteCount)
                    }
                }
            });
        });
    });
</script>

要停止刷新链接：

<a class='rateup' href='javascript:;' data-id=' " . $row['id'] . " ' title='vote up'>&#9650;</a>

单击链接时增加特定行的值？

1 个答案:

更新回复评论