使用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>

對於該問題的更多詳細信息，請提供任何幫助或見解，請點擊以下鏈接以獲取原始問題。

原始問題以及所有代碼和特定詳細信息

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);
        }
    }
}