PHP 实例 - AJAX 投票
PHP 实例 - AJAX 投票
功能介绍
本实例是一个基于 AJAX 投票的样例程序,通过 AJAX 技术实现页面无需刷新的实时更新投票结果的功能。用户可以在页面上对选项进行投票,程序会实时计算投票结果并在页面上进行展示。
开发环境
本实例的开发环境如下:
- PHP 7.0.33
- MySQL 5.7.28
- Apache 2.4.33
- jQuery 3.5.1
实现方法
本实例使用 PHP 和 MySQL 完成数据的存储和处理,使用 jQuery 中的 AJAX 方法实现实时更新页面的功能。
数据库设计
本实例中有两个数据表,分别是 options
表和 votes
表。options
表用来存储投票选项的信息,包括选项的编号、名称、投票计数等字段。votes
表用来存储用户的投票记录,包括投票者的 IP 地址、投票选项的编号等字段。
options
表结构如下:
CREATE TABLE IF NOT EXISTS `options` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL DEFAULT '',
`count` int(10) unsigned NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
votes
表结构如下:
CREATE TABLE IF NOT EXISTS `votes` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`option_id` int(10) unsigned NOT NULL DEFAULT '0',
`ip` varchar(50) NOT NULL DEFAULT '',
PRIMARY KEY (`id`),
KEY `option_id` (`option_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
投票页面
投票页面由一个表单组成,表单中包含若干投票选项,选项的编号、名称和投票计数等信息从 options
表中读取。
用户在页面上选中一个选项并提交表单,表单的数据会通过 AJAX 方法发送到服务器端进行处理。在服务器端的处理过程中,会首先检查用户是否已经参与投票,如果用户没有参与投票,则增加相应选项的投票计数,并记录用户的投票记录,如果用户已经参与投票,则阻止重复投票。
投票页面代码示例:
<form id="vote-form">
<?php
// 从数据库中读取投票选项
$options = $db->query("SELECT * FROM `options`")->fetchAll(PDO::FETCH_ASSOC);
foreach ($options as $option) {
echo '<div>
<label>
<input type="radio" name="option" value="' . $option['id'] . '">
' . $option['name'] . '
</label>
<span>' . $option['count'] . '</span>
</div>';
}
?>
<button type="submit">投票</button>
</form>
投票处理
在服务器端的投票处理代码中,首先会获取用户提交的表单数据,并进行数据校验,保证用户输入的数据符合要求,然后会检查用户的投票记录,如果用户已经参与投票,则阻止重复投票,否则会增加相应选项的投票计数,并记录用户的投票记录。
投票处理代码示例:
// 获取用户提交的表单数据
$option_id = isset($_POST['option']) ? intval($_POST['option']) : 0;
$ip = $_SERVER['REMOTE_ADDR'];
// 数据校验
if ($option_id <= 0) {
die('请选择投票选项!');
}
// 检查用户是否已经参与投票
$vote = $db->query("SELECT * FROM `votes` WHERE `option_id` = {$option_id} AND `ip` = '{$ip}'")->fetch(PDO::FETCH_ASSOC);
if ($vote) {
die('您已经投过票了!');
}
// 增加相应选项的投票计数
$db->exec("UPDATE `options` SET `count` = `count` + 1 WHERE `id` = {$option_id}");
// 记录用户的投票记录
$db->exec("INSERT INTO `votes` (`option_id`, `ip`) VALUES ({$option_id}, '{$ip}')");
实时更新页面
在客户端的页面中,会通过 jQuery 中的 AJAX 方法定时向服务器端获取最新的投票结果,然后将结果显示在页面上。每次获取最新投票结果时,会将上一次获取的结果缓存起来,并将缓存的结果和当前获取的结果进行比较,如果两者不一致,则更新页面上投票结果的显示。
实时更新页面的代码示例:
// 定时获取最新投票结果
setInterval(function () {
$.ajax({
url: 'get_votes.php',
type: 'get',
cache: false,
dataType: 'json',
success: function (data) {
if (data) {
var flag = true;
$('.vote-item').each(function (index, item) {
var count = parseInt($(item).find('.count').text());
if (count != data[index].count) {
$(item).find('.count').text(data[index].count);
flag = false;
}
});
if (!flag) {
alert('投票结果更新了!');
}
}
}
});
}, 2000);
总结
本实例演示了如何使用 PHP 和 MySQL 实现基于 AJAX 的投票功能,通过对代码的讲解,我们了解了实现这个功能所需要的步骤和方法。通过这个实例,我们不仅可以学习到如何使用 AJAX 技术实现页面无刷新的实时更新功能,还可以加深对 PHP 和 MySQL 的理解和使用。