$ .post () в jQuery не работает

Question

Я создаю систему рейтинга, и у меня есть следующий код jQuery на моей странице index.php:

<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 с информацией о рейтинге и выбранном идентификаторе элемента. Ниже этого скрипта у меня есть 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_rating: итоговые рейтинги (все рейтинги суммируются). рейтинг: текущий рейтинг total_ratings: количество оценок.

Проблема в том, что если я заменил $ _POST ['rating'] и $ _POST ['rid'] на $ _GET и поместил информацию в его URL, например, send.php? id = 1 & amp; rating = 4, это работает, и база данных обновляется. Однако, когда я нажимаю звезды, база данных не обновляется. После того, как я возился со сценарием, я понял, что сообщение должно работать, но идентификатор возвращается как 0.

Чтобы проверить это дальше, я поместил это в функцию щелчка:

document.write(current_star+rid);

Чтобы увидеть, что было возвращено. Кажется, проблема в том, что возвращаемое число умножается на количество раз, которое я наведу на элементы. Так что, если я наведу курсор на 6 звезд, то current_star и ID будут повторяться 6 раз.

Я чувствую, что я так близок к тому, чтобы заставить это работать, кто-нибудь понял, что с этим? Заранее спасибо.

Answer 1

Важно понимать, что обработка событий в jQuery основана на реестре, что означает, что jQuery позволяет регистрировать несколько обратных вызовов для любого конкретного события, и он будет вызывать их в порядке которые они были связаны.

Причина, по которой вы видите повторяющиеся значения current_star и id, заключается в том, что вы продолжаете связывать все больше и больше событий при каждом наведении. Это связано с тем, что ваш click() вызов находится внутри вашего вызова hover(), поэтому при каждом наведении курсора вы будете связывать другое событие click ().

Попробуйте связать событие <=> с событием hover, используя что-то вроде этого:

$("[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});
});

Вы также, вероятно, не хотите связывать один <=> вызов внутри другого по той же причине.

Answer 2

Я заметил, что вы использовали $_POST['rid'] вместо $_POST['id']. Может быть, это твоя проблема.