jQuery 中的 $.post() 不起作用

Question

我正在制作一个评级系统，我的 index.php 页面上有以下 jQuery 代码：

<script type="text/javascript">

$(document).ready(function() {

    $("[id^=rating_]").hover(function() {

        var rid = $(this).attr("id").split("_")[1];
        $("#rating_"+rid).children("[class^=star_]").children('img').hover(function() {

            $("#rating_"+rid).children("[class^=star_]").children('img').removeClass("hover");

            /* The hovered item number */
            var hovered = $(this).parent().attr("class").split("_")[1];
            var hovered2 = $(this).parent().attr("class").split("_")[1];

            while(hovered > 0) {
                $("#rating_"+rid).children(".star_"+hovered).children('img').addClass("hover");
                hovered--;
            }

            $("#rating_"+rid).children("[class^=star_]").click(function() {
                var current_star = $(this).attr("class").split("_")[1];

                $.post("send.php", {rating: current_star, id: rid});
            });
        });

    });




});

</script>

基本上有一个悬停效果，然后当您单击星星时，它会向 send.php 发送一个 post 请求，其中包含有关点击的评级和元素 ID 的信息。在这个脚本下面，我有一些看起来像这样的 PHP：

<?php


$query = mysql_query("SELECT * FROM test");

while($row = mysql_fetch_array($query)) {
    $rating = (int)$row[rating];
    ?>
    <div id="rating_<?php echo $row[id]; ?>">
    <span class="star_1"><img src="star_blank.png" alt="" <?php if($rating > 0) { echo"class='hover'"; } ?> /></span>
    <span class="star_2"><img src="star_blank.png" alt="" <?php if($rating > 1.5) { echo"class='hover'"; } ?> /></span>
    <span class="star_3"><img src="star_blank.png" alt="" <?php if($rating > 2.5) { echo"class='hover'"; } ?> /></span>
    <span class="star_4"><img src="star_blank.png" alt="" <?php if($rating > 3.5) { echo"class='hover'"; } ?> /></span>
    <span class="star_5"><img src="star_blank.png" alt="" <?php if($rating > 4.5) { echo"class='hover'"; } ?> /></span>
    <div class="clearleft">&nbsp;</div>
    </div>
    <br />
    <?php   
}

?>

当然，我还有一些 CSS 来使它看起来不错。

send.php 文件如下所示：

<?php

mysql_connect("localhost", "admin", "") or die(mysql_error());
mysql_select_db("test") or die(mysql_error());


$rating = (int)$_POST['rating'];
$id = (int)$_POST['rid'];



$query = mysql_query("SELECT * FROM test WHERE id = '".$id."'") or die(mysql_error());

while($row = mysql_fetch_array($query)) {

    if($rating > 5 || $rating < 1) {
        echo"Rating can't be below 1 or more than 5";
    }
    else {

        $total_ratings = $row['total_ratings'];
        $total_rating = $row['total_rating'];
        $current_rating = $row['rating'];

        $new_total_rating = $total_rating + $rating;
        $new_total_ratings = $total_ratings + 1;
        $new_rating = $new_total_rating / $new_total_ratings;


        // Lets run the queries. 

        mysql_query("UPDATE test SET total_rating = '".$new_total_rating."' WHERE id = '".$id."'") or die(mysql_error());
        mysql_query("UPDATE test SET rating = '".$new_rating."' WHERE id = '".$id."'") or die(mysql_error());
        mysql_query("UPDATE test SET total_ratings = '".$new_total_ratings."' WHERE id = '".$id."'") or die(mysql_error());
    }

}




?>

数据库表中有 3 个评级列； 总评分：总评分（所有评分加在一起）。 评级：当前评级 Total_Ratings：评分数量。

问题是，如果我将 $_POST[' rating'] 和 $_POST['rid'] 更改为 $_GET 并将信息放入 url 中，例如 send.php?id=1& rating=4，它工作，并且数据库得到更新。但是，当我按星星时，数据库没有更新。在搞乱了脚本之后，我意识到帖子必须有效，但是 id 返回为 0。

为了进一步测试这一点，我将其放入 click 函数中：

document.write(current_star+rid);

查看返回的内容。问题似乎是返回的数字乘以我将鼠标悬停在元素上的次数。因此，如果我将鼠标悬停在 6 颗星星上，那么 current_star 和 ID 将重复 6 次。

我觉得我已经很接近让它发挥作用了，有人知道这是怎么回事吗？提前致谢。

Answer 1

关于 jQuery 的事件处理，要认识到的重要一点是它是基于注册表的，这意味着 jQuery 允许您为任何特定事件注册多个回调，并且它将按照它们被调用的顺序调用它们。边界。

您看到重复的 current_star 和 id 值的原因是您在每次悬停时不断绑定越来越多的事件。这是因为您的 click() 调用位于您的 hover() 调用中，因此每次悬停时，您都会绑定另一个 click() 事件。

尝试在悬停事件外部绑定您的 click() 事件，使用如下内容：

$("[id^=rating_]").children("[class^=star_]").click(function() {
        var rid = $(this).parent().attr("id").split("_")[1];
        var current_star = $(this).attr("class").split("_")[1];

        $.post("send.php", {rating: current_star, id: rid});
});

您也可能不希望将一个 hover() 调用绑定到另一个调用中，因为同样的原因。

Answer 2

我注意到您使用了 $_POST['rid'] 而不是 $_POST['id']。可能这就是你的问题。