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 的理解和使用。