在使用 AJAX 保存到数据库后，使用 PHP 从数据库中获取最新值。无需重新加载页面

Question

我正在建立一个模拟 Flickr 网站，您可以在其中通过单击 1-10 星来对照片进行评分。当页面加载时，它会为照片创建一个对象，并根据与其 id 对应的 db 条目设置其值。当您将鼠标悬停在星星上时，它们会亮起（从 1 开始）到您的光标所在的星号，指定您的评分。当您单击星标时，它会提交评级（通过 AJAX）并更新数据库，然后设置星标以反映新评级。

问题是，如果您将鼠标悬停在星星上，然后将鼠标移开它们（不单击一个），那么亮起的星星反映的是页面最初加载时照片的评级，而不是当前的评级（基于用户点击星号时使用 AJAX 记录的评分）。

数据库正在更新，星号在 AJAX 调用后反映了正确的评级（因为我在 AJAX 调用结束时调用了与 onmouseout 相同的函数，stars_current_rating(rating)）。唯一的区别是在 AJAX 调用结束时，我将 xmlhttp.responseText 作为参数传递。在 onmouseout 中，我传入（我想要的）数据库中该照片的最新评级。

onmouseout="stars_current_rating(<?php echo Photograph::find_by_id($_GET['id'])->rating?>);" 

我在这个调用背后的逻辑是假设我通过找到它并将新评级传递给 stars_current_rating(...) 来获取已保存到数据库的新评级。唯一的问题是 onmouseout 传递页面加载时从数据库中提取的原始评级参数，而不是数据库中的新值（这是 find_by_id() sql函数所做的）......这是处理的代码星星的显示。

        <div id="rating" class="rating">
        <?php 
            for($i=1; $i<11; $i++){
        ?>
        <a id="rating_star<?php echo $i ?>" href="#" onmouseover="decide_rating(<?php echo $i ?>);" 
        onmouseout="stars_current_rating(<?php echo Photograph::find_by_id($_GET['id'])->rating?>);" 
        onmousedown="set_rating(<?php echo $photo->id.", ".$i ?>);">
        <img id="star<?php echo $i ?>" class="rating_star" src=
        <?php 
            // Sets up stars with initial rating in db when page is first loaded
            if($photo->rating >= $i){ 
                echo "images/assets/rating_star.png";
            } else {
                echo "images/assets/rating_star_off.png";
            }
        ?>
        />
        </a>
        <?php } ?>

    </div>

任何帮助或见解将不胜感激有关该问题的更多详细信息，请单击下面的链接以获取原始问题。

Original Question with all the code and specific details

Answer 1

您可以使用 set_rating 函数来更改 onmouseout 函数.. 像这样

function set_rating(photo_id,rating) {
    //do your ajax or whatever here, don't need to change anything

    //we need some way to select all the 'rating_star' links
    for(var i=1, i<11; i++) {
        var star = document.getElementById('rating_star' + i);

        //overwrite the current mouseout function with a new one,
        // providing the new current rating

        star.onmouseout = function() {
            stars_current_rating(rating);
        }
    }
}