1. 创建前端页面（HTML + JavaScript）：
创建一个 HTML 页面，包含投票选项、显示投票结果的容器以及用于处理投票的 JavaScript 函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Voting System</title>
<script>
function vote(option) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("result").innerHTML = this.responseText;
}
};
xhttp.open("GET", "vote.php?option=" + option, true);
xhttp.send();
}
</script>
</head>
<body>
<h2>Vote for Your Favorite Option</h2>
<div>
<button onclick="vote('Option A')">Option A</button>
<button onclick="vote('Option B')">Option B</button>
<button onclick="vote('Option C')">Option C</button>
</div>
<div id="result"></div>
</body>
</html>
2. 创建服务器端 PHP 脚本：
创建一个 PHP 脚本，用于处理 AJAX 请求，更新投票结果并返回给前端。
<!-- vote.php -->
<?php
$option = $_GET["option"];
$dataFile = "vote_data.txt";
// 读取当前的投票结果
$currentData = file_get_contents($dataFile);
$currentVotes = json_decode($currentData, true);
// 更新投票结果
if (array_key_exists($option, $currentVotes)) {
$currentVotes[$option]++;
} else {
$currentVotes[$option] = 1;
}
// 将更新后的结果保存到文件
file_put_contents($dataFile, json_encode($currentVotes));
// 返回投票结果
foreach ($currentVotes as $key => $value) {
echo "<p>$key: $value votes</p>";
}
?>
3. 运行应用：
将 HTML 文件和 PHP 文件放置在支持 PHP 的 web 服务器上，通过浏览器访问 HTML 文件。当用户点击投票按钮时，JavaScript 将通过 AJAX 请求将选中的选项传递给 PHP 脚本，后者将更新投票结果并将结果返回给前端，最终在页面上显示更新后的投票结果。
请注意，此示例中的投票结果存储在一个文本文件中，而在实际应用中，你可能会使用数据库等更健壮的方法来保存和管理投票数据。此外，对于实际应用，需要考虑安全性和错误处理等方面。
转载请注明出处：http://www.zyzy.cn/article/detail/3649/PHP