PHP AJAX投票详解

20 阅读 0 评论 0 点赞

本节将介绍一个使用PHP和Ajax实现投票系统的例子，用户可以投票支持或反对，结果实时更新并以水平条形式展示。

思路：1. 在test.html里准备投票按钮和结果显示区域，通过点击按钮触发投票函数。2. vote()函数主要内容是：创建XMLHttpRequest对象，配置为POST请求，将投票选择发送到test.php。3. test.php处理请求，更新dotcpp.txt文件中的投票数据，返回JSON格式的投票结果。4. 前端解析结果，以水平条形式展示投票比例。

1. 创建dotcpp.txt初始文件

support:0
oppose:0

2. test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PHP Ajax投票系统</title>
</head>
<body>
    <h2>Dotcpp编程投票系统</h2>
    
    <div>
        <div>你喜欢Dotcpp编程吗？</div>
        
        <div>
            <button onclick="vote('support')">喜欢 👍</button>
            <button onclick="vote('oppose')">不喜欢 👎</button>
        </div>
        
        <div>
            <div>当前投票结果：</div>
            <div id="vote-bars">
                <!-- 投票条将在这里动态生成 -->
            </div>
            <div id="vote-numbers">
                <!-- 投票数字将在这里显示 -->
            </div>
            <div id="vote-total">
                <!-- 总票数将在这里显示 -->
            </div>
        </div>
        
        <div id="vote-message">
            <!-- 投票消息将在这里显示 -->
        </div>
    </div>
    
    <script>
    // 页面加载时获取当前投票数据
    window.onload = function() {
        loadVoteData();
    };
    
    function vote(type) {
        // 1. 创建XMLHttpRequest对象
        let xhr = new XMLHttpRequest();
         
        // 2. 配置请求
        xhr.open("POST", "test.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         
        // 3. 定义响应处理函数
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    try {
                        let response = JSON.parse(xhr.responseText);
                        
                        if (response.success) {
                            // 更新投票结果显示
                            updateVoteDisplay(response.data);
                            
                            // 显示成功消息
                            showMessage("投票成功！感谢您的参与。", "success");
                        } else {
                            showMessage("投票失败：" + response.message, "error");
                        }
                    } catch (e) {
                        showMessage("解析响应数据失败", "error");
                    }
                } else {
                    showMessage("网络请求失败，状态码：" + xhr.status, "error");
                }
            }
        };
         
        // 4. 发送请求
        xhr.send("vote_type=" + encodeURIComponent(type));
    }
    
    function loadVoteData() {
        let xhr = new XMLHttpRequest();
        xhr.open("GET", "test.php?action=get_data", true);
        
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                try {
                    let response = JSON.parse(xhr.responseText);
                    if (response.success) {
                        updateVoteDisplay(response.data);
                    }
                } catch (e) {
                    console.error("加载投票数据失败");
                }
            }
        };
        
        xhr.send();
    }
    
    function updateVoteDisplay(data) {
        let support = parseInt(data.support);
        let oppose = parseInt(data.oppose);
        let total = support + oppose;
        
        // 计算百分比
        let supportPercent = total > 0 ? Math.round((support / total) * 100) : 50;
        let opposePercent = total > 0 ? Math.round((oppose / total) * 100) : 50;
        
        // 更新投票条
        document.getElementById("vote-bars").innerHTML = `
            喜欢: ${supportPercent}% | 不喜欢: ${opposePercent}%
        `;
        
        // 更新投票数字
        document.getElementById("vote-numbers").innerHTML = `
            喜欢: ${support} 票 | 不喜欢: ${oppose} 票
        `;
        
        // 更新总票数
        document.getElementById("vote-total").innerHTML = `
            总票数: ${total} 票
        `;
    }
    
    function showMessage(message, type) {
        let messageDiv = document.getElementById("vote-message");
        messageDiv.innerHTML = message;
        
        // 3秒后隐藏消息
        setTimeout(function() {
            messageDiv.innerHTML = "";
        }, 3000);
    }
    </script>
</body>
</html>

3. test.php

<?php
// 设置响应头为JSON格式
header('Content-Type: application/json; charset=utf-8');
// 数据文件路径
$dataFile = 'dotcpp.txt';
// 初始化默认数据
$defaultData = [
    'support' => 0,
    'oppose' => 0
];
// 如果是获取数据请求
if (isset($_GET['action']) && $_GET['action'] === 'get_data') {
    $data = readVoteData($dataFile, $defaultData);
    echo json_encode([
        'success' => true,
        'data' => $data
    ]);
    exit;
}
// 处理投票请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取投票类型
    $voteType = isset($_POST['vote_type']) ? $_POST['vote_type'] : '';
    
    // 验证投票类型
    if (!in_array($voteType, ['support', 'oppose'])) {
        echo json_encode([
            'success' => false,
            'message' => '无效的投票类型'
        ]);
        exit;
    }
    
    // 读取当前数据
    $data = readVoteData($dataFile, $defaultData);
    
    // 更新投票数据
    $data[$voteType]++;
    
    // 保存数据到文件
    if (saveVoteData($dataFile, $data)) {
        echo json_encode([
            'success' => true,
            'data' => $data,
            'message' => '投票成功'
        ]);
    } else {
        echo json_encode([
            'success' => false,
            'message' => '保存投票数据失败'
        ]);
    }
    exit;
}
/**
 * 读取投票数据
 */
function readVoteData($filename, $defaultData) {
    if (!file_exists($filename)) {
        // 如果文件不存在，创建并写入默认数据
        saveVoteData($filename, $defaultData);
        return $defaultData;
    }
    
    $content = file_get_contents($filename);
    $lines = explode("\n", trim($content));
    
    $data = $defaultData;
    
    foreach ($lines as $line) {
        $line = trim($line);
        if (empty($line)) continue;
        
        $parts = explode(':', $line, 2);
        if (count($parts) === 2) {
            $key = trim($parts[0]);
            $value = intval(trim($parts[1]));
            
            if (array_key_exists($key, $defaultData)) {
                $data[$key] = $value;
            }
        }
    }
    
    return $data;
}
/**
 * 保存投票数据
 */
function saveVoteData($filename, $data) {
    $content = "";
    foreach ($data as $key => $value) {
        $content .= $key . ":" . $value . "\n";
    }
    
    return file_put_contents($filename, $content) !== false;
}
?>

4. 效果演示

4.1 访问test.html：

PHP AJAX投票