如何用HTML在线制作投票系统_HTML在线投票系统制作与防作弊方案

<form id="voteForm">
  <h3>请选择你最喜欢的水果：</h3>
  <input type="radio" name="option" value="apple" required> 苹果 <br>
  <input type="radio" name="option" value="banana"> 香蕉 <br>
  <input type="radio" name="option" value="orange"> 橙子 <br>
  <button type="submit">提交投票</button>
</form>
<p><div id="result"></div></p>

document.getElementById("voteForm").addEventListener("submit", function(e) {
  e.preventDefault();
  const selected = document.querySelector('input[name="option"]:checked').value;
<p>fetch('vote.php', {
method: 'POST',
body: JSON.stringify({ option: selected })
})
.then(response => response.json())
.then(data => {
document.getElementById("result").innerHTML = "投票成功！当前结果：" + data.total;
});
});</p>

// vote.php
header("Content-Type: application/json");
$data = json_decode(file_get_contents("php://input"), true);
<p>$option = $data['option'];
$ip = $_SERVER['REMOTE_ADDR']; // 获取用户IP
$timestamp = time();</p><p>// 连接数据库
$conn = new mysqli("localhost", "username", "password", "votedb");</p><p>// 检查是否已投票（防重复）
$stmt = $conn->prepare("SELECT * FROM votes WHERE ip_address = ?");
$stmt->bind_param("s", $ip);
$stmt->execute();
$result = $stmt->get_result();</p><p>if ($result->num_rows > 0) {
echo json_encode(["error" => "您已投过票！"]);
} else {
// 插入新投票
$insert = $conn->prepare("INSERT INTO votes (option, ip_address, vote_time) VALUES (?, ?, ?)");
$insert->bind_param("ssi", $option, $ip, $timestamp);
$insert->execute();</p><p>// 统计当前票数
$total = $conn->query("SELECT COUNT(*) as total FROM votes WHERE option='$option'")->fetch_assoc();</p><p>echo json_encode(["total" => $total['total']]);
}</p>

// result.php
$conn = new mysqli("localhost", "username", "password", "votedb");
$result = $conn->query("SELECT option, COUNT(*) as count FROM votes GROUP BY option");
<p>$votes = [];
while($row = $result->fetch_assoc()) {
$votes[$row['option']] = $row['count'];
}</p><p>echo json_encode($votes);</p>