Dynamic online voting system implemented using PHP and AJAX

Dynamic online voting system implemented using PHP and AJAX

Introduction:
With the development of the Internet, more and more activities are beginning to rely on online voting systems to collect user opinions and choices. This article will introduce how to use PHP and AJAX to implement a simple dynamic online voting system. Through this system, users can select voting options and view voting results instantly.

1. Establish database and data table
   First, we need to create a MySQL database and create a data table in it to store data related to voting options and voting results. You can use the following SQL statement to create a data table named "vote":

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)

);

2. Create a voting page
   In the voting page, we need to display the voting options and update the voting results instantly after clicking to vote through AJAX. Here is an example of HTML code for a simple voting page:

<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>

<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>

3. Create a PHP script that handles voting requests
   us You need to create a PHP script named "vote.php" to process the user's voting request and update the voting results of the corresponding option in the database. The following is a simple "vote.php" code example:

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();
}

?>

Summary:
Through the above Code example, we can implement a simple dynamic online voting system. Users can select voting options and view voting results instantly. This system can be easily applied to the voting needs of various activities. At the same time, we can also expand and optimize according to actual needs, such as adding a variety of voting statistics charts, voting time limits and other functions. I hope this article helps you understand and practice dynamic online voting systems.

The above is the detailed content of Dynamic online voting system implemented using PHP and AJAX. For more information, please follow other related articles on the PHP Chinese website!