javascript - 如何保存投票结果，而不是在页面刷新时还原 - Thinbug

如何保存投票结果，而不是在页面刷新时还原

时间：2013-09-30 05:47:29

标签： javascript php

我有投票系统，

问题是，当我点票/点票时，投票。但是当我刷新/重新加载页面时，它回到默认投票金额。到目前为止，仅使用wamp在本地计算机上运行测试。

这是index.php

的代码

<?php
    include('config.php');
    # connect mysql db
    dbConnect();

    $query = mysql_query(
    'SELECT id, first_name, last_name, film_info, vote 
    FROM  voting
    LIMIT 0 , 15');
?>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>jQUery Voting System</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <div class="wrap">
        <h1><a href="#">Voting System</a></h1>

        <?php while($row = mysql_fetch_array($query)): ?>
        <div class="item" data-postid="<?php echo $row['id'] ?>" data-score="<?php       echo $row['vote'] ?>">
            <div class="vote-span"><!-- voting-->
                <div class="vote" data-action="up" title="Vote up">
                    <i class="icon-chevron-up"></i>
                </div><!--vote up-->
                <div class="vote-score"><?php echo $row['vote'] ?></div>
                <div class="vote" data-action="down" title="Vote down">
                    <i class="icon-chevron-down"></i>
                </div><!--vote down-->
            </div>

            <div class="post"><!-- post data -->
                <h2><?php echo $row['first_name'].' '.$row['last_name']?></h2>
                <p><?php echo $row['film_info'] ?></p>
            </div>
        </div><!--item-->
        <?php endwhile?>

        <p style="text-align:center; margin-top: 20px">&copy w3bees.com 2013</p>
    </div>
    <?php dbConnect(false); ?>
</body>
</html>

这是config.php

<?php
# db configuration 
define('DB_HOST',       'locahost');
define('DB_USER',       'hendra');
define('DB_PASS',       '123456');
define('DB_NAME',       'voter');

# db connect
function dbConnect($close=true){
    global $link;

    if (!$close) {
        mysql_close($link);
        return true;
    }

    $link = mysql_connect("localhost", "hendra", "123456") or die('Could not connect to MySQL DB ') . mysql_error();
    if (!mysql_select_db("voter", $link))
        return false;
}

?>

这是ajaxvote.php

<?php
include('config.php');
# start new session
session_start();

if ($_SERVER['HTTP_X_REQUESTED_WITH']) {
    if (isset($_POST['postid']) AND isset($_POST['action'])) {
        $postId = (int) mysql_real_escape_string($_POST['postid']);
        # check if already voted, if found voted then return
        if (isset($_SESSION['vote'][$postId])) return;
        # connect mysql db
        dbConnect();

        # query into db table to know current voting score 
        $query = mysql_query("
            SELECT vote
            from voting
            WHERE id = '{$postId}' 
            LIMIT 1" );

        # increase or dicrease voting score
        if ($data = mysql_fetch_array($query)) {
            if ($_POST['action'] === 'up'){
                $vote = ++$data['vote'];
            } else {
                $vote = --$data['vote'];
            }
            # update new voting score
            mysql_query("
                UPDATE voting
                SET vote = '{$vote}'
                WHERE id = '{$postId}' ");

            # set session with post id as true
            $_SESSION['vote'][$postId] = true;
            # close db connection
            dbConnect(false);
        }
    }
}
?>

，这是jQuery代码

$(document).ready(function(){
    // ajax setup
    $.ajaxSetup({
        url: 'ajaxvote.php',
        type: 'POST',
        cache: 'false'
    });

    // any voting button (up/down) clicked event
    $('.vote').click(function(){
        var self = $(this); // cache $this
        var action = self.data('action'); // grab action data up/down 
        var parent = self.parent().parent(); // grab grand parent .item
        var postid = parent.data('postid'); // grab post id from data-postid
        var score = parent.data('score'); // grab score form data-score

        // only works where is no disabled class
        if (!parent.hasClass('.disabled')) {
            // vote up action
            if (action == 'up') {
                // increase vote score and color to orange
                parent.find('.vote-score').html(++score).css({'color':'orange'});
                // change vote up button color to orange
                self.css({'color':'orange'});
                // send ajax request with post id & action
                $.ajax({data: {'postid' : postid, 'action' : 'up'}});
            }
            // voting down action
            else if (action == 'down'){
                // decrease vote score and color to red
                parent.find('.vote-score').html(--score).css({'color':'red'});
                // change vote up button color to red
                self.css({'color':'red'});
                // send ajax request
                $.ajax({data: {'postid' : postid, 'action' : 'down'}});
            };

            // add disabled class with .item
            parent.addClass('.disabled');
        };
    });
});

2 个答案:

答案 0 :(得分：0)

解决ajaxvote.php中的代码问题可能存在问题，因为您在数据库连接之前调用了mysql_real_escape_string。

答案 1 :(得分：0)

更改

define('DB_HOST',       'locahost');

为：

define('DB_HOST',       'localhost');