1. 创建一个HTML文件（index.html）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Voting System</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<h2>Vote for Your Favorite Option</h2>
<div id="options">
<input type="radio" name="vote" value="option1"> Option 1
<input type="radio" name="vote" value="option2"> Option 2
<button onclick="vote()">Vote</button>
</div>
<div id="result"></div>
<script>
function vote() {
// 获取选中的选项
var selectedOption = $('input[name=vote]:checked').val();
// 使用AJAX发起POST请求
$.ajax({
url: 'vote.php', // PHP脚本的地址
type: 'POST',
data: {option: selectedOption}, // 传递投票选项到服务器端
dataType: 'html',
success: function (data) {
// 请求成功时的回调函数
$('#result').html(data); // 将投票结果显示在页面上
},
error: function () {
// 请求失败时的回调函数
alert('Error occurred while processing the request.');
}
});
}
</script>
</body>
</html>
2. 创建一个处理AJAX请求的PHP文件（vote.php）：
<?php
// 存储投票结果的文件
$voteFile = 'vote_results.txt';
// 获取投票选项
$selectedOption = $_POST['option'];
// 读取当前投票结果
$votes = json_decode(file_get_contents($voteFile), true);
// 更新投票结果
if (isset($votes[$selectedOption])) {
$votes[$selectedOption]++;
} else {
$votes[$selectedOption] = 1;
}
// 将更新后的结果保存到文件
file_put_contents($voteFile, json_encode($votes));
// 输出投票结果
echo '<h3>Vote Results:</h3>';
echo '<ul>';
foreach ($votes as $option => $count) {
echo '<li>' . $option . ': ' . $count . ' votes</li>';
}
echo '</ul>';
?>
在这个示例中，用户通过点击按钮进行投票，JavaScript监听按钮点击事件，获取选中的选项，然后使用AJAX发起POST请求到vote.php。vote.php读取当前投票结果，更新结果，将结果保存到文件，并返回最新的结果给前端。
请注意，这只是一个基本的示例，实际应用中你可能需要更复杂的逻辑、数据存储方式以及对并发投票的处理。确保在生产环境中处理用户输入的安全性，并考虑使用数据库来存储投票结果。
转载请注明出处：http://www.pingtaimeng.com/article/detail/13849/PHP