-2

查看每个进程中的错误框。

saveRating.php php 代码

<?php
    $result = array();
    $result["status"] = "";
    $result["message"] = "";

    if(isset($_POST["itemID"]) && isset($_POST["itemValue"])){
        $result["status"] = "OK";
        $result["message"] = "Rating has been saved successfully.";
    } else {
        $result["status"] = "ERROR";
        $result["message"] = "Provide itemID and itemValue!";
    } 

    echo json_encode($result);
?>

html代码

<body>
    <h1>Creating Five Stars Rating System</h1>
    <div class="fieldRow">
        <label>Book 123A</label>
        <ul id="book-123a" class="ratingStars">
            <li></li>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="fieldRow">
        <label>Book 123B</label>
        <ul id="book-123b" class="ratingStars">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="fieldRow">
        <label>Book 123C</label>
        <ul id="book-123c" class="ratingStars">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li class="active"></li>
        </ul>
    </div>

    <div id="placeHolder"></div>
</body>

jQuery代码

<script>
$(document).ready(function(){
    $('ul.ratingStars li.active').prevAll().addClass('active');

    $('ul.ratingStars li').each(function(){
        var $item = $(this);
        var $itemContainer = $item.parents('ul.ratingStars');
        var containerID = $itemContainer.attr('id');
        var $itemsAll = $itemContainer.find('li');

        $item.mouseover(function(){
            $itemsAll.addClass('default');
            $item.prevAll().addClass('highlighted');
        }).mouseout(function(){
            $itemsAll.removeClass('default').removeClass('highlighted');
        }).bind('click', function(){
            var itemIndex = $itemsAll.index(this);

            $.post('ajax/saveRating.php',{
                'itemID': containerID,
                'itemValue': itemIndex
            }, function(data) {
                if(data && data.status == "100"){
                    $item.addClass('active').removeClass('highlighted');
                    $item.nextAll().removeClass('active');
                    $item.prevAll().addClass('active');
                } else {
                    alert('Error!');
                } 
            }, "json");
        });
    });
});
</script>

CSS代码

<style>
    label, ul {
        float:left;
    }
    .fieldRow {
        clear:both; margin:5px 0px; overflow:hidden;
    }
    ul.ratingStars {
        list-style:none; margin:0px 0px; 
        overflow:hidden;
    }
    ul.ratingStars li {
        float:left; width:16px; height:16px; 
        background:url('icons/star.gif') no-repeat left top; 
        cursor:pointer;
    }
    ul.ratingStars li.active {
        background-position: 0px -32px;
    }
    ul.ratingStars li.default {
        background-position: 0px 0px;
    }
    ul.ratingStars li.highlighted, ul.ratingStars li:hover {
        background-position: 0px -16px;
    }
</style>

星星img文件

http://www.packtpub.com/sites/default/files/Article-Images/3081_02_06.png

总是alert('Error!');请帮助

4

1 回答 1

2

在jquery code你检查

if(data && data.status == "100") {

但在你的saveRating.php php code你设置status为

$result["status"] = "OK";

或者

$result["status"] = "ERROR";

因此您的 javascript 检查是false.

于 2012-12-12T15:04:50.250 回答