MySQL 与 JavaScript 实现简单在线投票功能的方法

技术文摘

2025-01-14 21:02:43 小编

在当今数字化时代，在线投票功能在许多场景中都有着广泛的应用，比如活动评选、市场调研等。本文将介绍如何使用MySQL与JavaScript实现一个简单的在线投票功能。

我们需要搭建MySQL数据库来存储投票相关的数据。创建一个数据库，例如“vote_db”，并在其中创建一张表，命名为“votes”。表结构可以包含投票选项的ID、选项内容以及对应的票数。例如：

CREATE DATABASE vote_db;
USE vote_db;
CREATE TABLE votes (
    id INT AUTO_INCREMENT PRIMARY KEY,
    option_text VARCHAR(255) NOT NULL,
    votes_count INT DEFAULT 0
);

接下来，使用JavaScript来实现前端的投票交互和与后端的数据交互。在HTML页面中，我们创建投票选项的展示区域以及投票按钮。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>在线投票</title>
</head>
<body>
    <h1>在线投票</h1>
    <div id="vote-options"></div>
    <script>
        // 从数据库获取投票选项并展示
        fetch('get_vote_options.php')
          .then(response => response.json())
          .then(data => {
                const voteOptions = document.getElementById('vote-options');
                data.forEach(option => {
                    const optionDiv = document.createElement('div');
                    optionDiv.innerHTML = `<p>${option.option_text}</p><button onclick="vote(${option.id})">投票</button>`;
                    voteOptions.appendChild(optionDiv);
                });
            });

        function vote(optionId) {
            fetch('vote.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ option_id: optionId })
            })
          .then(response => response.json())
          .then(data => {
                if (data.success) {
                    alert('投票成功！');
                } else {
                    alert('投票失败，请重试。');
                }
            });
        }
    </script>
</body>
</html>

上述代码中，通过fetch API从后端获取投票选项并展示，用户点击投票按钮时，将投票信息发送到后端。

后端处理部分，使用PHP来与MySQL数据库交互。“get_vote_options.php”文件负责从数据库中获取投票选项并返回给前端：

<?php
header('Content-Type: application/json');
$conn = new mysqli('localhost', 'username', 'password', 'vote_db');
if ($conn->connect_error) {
    die(json_encode(['error' => '连接数据库失败']));
}
$sql = "SELECT * FROM votes";
$result = $conn->query($sql);
$options = [];
while ($row = $result->fetch_assoc()) {
    $options[] = $row;
}
echo json_encode($options);
$conn->close();
?>

“vote.php”文件负责处理投票操作，更新数据库中的票数：

<?php
header('Content-Type: application/json');
$conn = new mysqli('localhost', 'username', 'password', 'vote_db');
if ($conn->connect_error) {
    die(json_encode(['error' => '连接数据库失败']));
}
$inputJSON = file_get_contents('php://input');
$input = json_decode($inputJSON, TRUE);
$optionId = $input['option_id'];
$sql = "UPDATE votes SET votes_count = votes_count + 1 WHERE id = $optionId";
if ($conn->query($sql) === TRUE) {
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false]);
}
$conn->close();
?>

通过以上步骤，我们成功使用MySQL与JavaScript实现了一个简单的在线投票功能，从数据存储到前端交互，再到后端处理，各个环节紧密配合，为用户提供了便捷的投票体验。

TAGS: 实现方法 JavaScript MySQL 在线投票功能

万千站长工具

技术文摘

MySQL 与 JavaScript 实现简单在线投票功能的方法

欢迎使用万千站长工具！