嗨,我有投票系统,
问题是当我点击投票向上/向下投票时。但是当我刷新/重新加载页面时,它会恢复到默认投票数量。到目前为止,仅在本地机器上使用 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">© 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');
};
});
});