使用PHP和AJAX實現的動態線上投票系統
#引言:
隨著網路的發展,越來越多的活動開始借助線上投票系統來收集使用者意見和選擇。本文將介紹如何使用PHP和AJAX實現一個簡單的動態線上投票系統。透過這個系統,使用者可以選擇投票選項並即時查看投票結果。
CREATE DATABASE vote;
USE vote;
CREATE TABLE options (
id INT(11) NOT NULL AUTO_INCREMENT, name VARCHAR(255) NOT NULL, votes INT(11) NOT NULL, PRIMARY KEY (id)
);
<title>动态在线投票系统</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $(".vote-button").click(function(){ var optionId = $(this).data("option-id"); $.ajax({ url: "vote.php", method: "POST", data: {optionId: optionId}, success: function(response){ $("#result-container").html(response); } }); }); }); </script>
< /head>
<h1>动态在线投票系统</h1> <div id="options-container"> <?php // 连接数据库 $conn = new mysqli("localhost", "username", "password", "vote"); if ($conn->connect_error) { die("连接数据库失败: " . $conn->connect_error); } // 查询投票选项 $sql = "SELECT * FROM options"; $result = $conn->query($sql); // 输出投票选项 if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { echo '<div class="option"> <span class="option-name">' . $row["name"] . '</span> <button class="vote-button" data-option-id="' . $row["id"] . '">投票</button> </div>'; } } else { echo "暂无投票选项"; } $conn->close(); ?> </div> <div id="result-container"> <!-- 投票结果将在这里显示 --> </div>
if(isset($_POST["optionId"])){ // 连接数据库 $conn = new mysqli("localhost", "username", "password", "vote"); if ($conn->connect_error) { die("连接数据库失败: " . $conn->connect_error); } // 获取选项ID和更新投票结果 $optionId = $_POST["optionId"]; $sql = "UPDATE options SET votes = votes + 1 WHERE id = $optionId"; $conn->query($sql); // 查询更新后的投票结果 $sql = "SELECT * FROM options"; $result = $conn->query($sql); // 输出投票结果 if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { echo '<div class="result"> <span class="option-name">' . $row["name"] . '</span> <span class="option-votes">' . $row["votes"] . ' 票</span> </div>'; } } else { echo "暂无投票结果"; } $conn->close(); }
?>
總結:
透過上述程式碼範例,我們可以實作一個簡單的動態線上投票系統。用戶可以選擇投票選項並即時查看投票結果。這個系統可以輕鬆應用於各種活動的投票需求。同時,我們也可以根據實際需求進行擴展和最佳化,例如新增多種投票統計圖表、投票時間限制等功能。希望本文對你理解和實踐動態線上投票系統有所幫助。
以上是使用PHP和AJAX實現的動態線上投票系統的詳細內容。更多資訊請關注PHP中文網其他相關文章!