基于js实现投票的实例代码

首先，基于js实现投票要考虑两个方面，其一是前端页面的实现，其二是后端接口的实现。

前端页面实现

前端页面主要包含页面布局和交互逻辑两个部分。

页面布局

可以使用HTML/CSS完成页面布局，页面布局可以按照个人需求自定义设计，以本次介绍的前端实现为例，可分为以下几个区域：

问题区：用于展示当前投票的问题
选项区：用于展示当前问题的选项内容
操作区：用于用户进行投票操作，包含投票按钮和查看投票结果按钮

以下是示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>投票系统</title>
</head>
<body>
    <div id="question"></div>
    <ul id="options"></ul>
    <div id="btnArea">
        <button onclick="vote()">投票</button>
        <button onclick="showResult()">查看结果</button>
    </div>
</body>
</html>

以上代码中，<div>、<ul>、<button> 等HTML标签分别表示相应的区域和操作按钮。

交互逻辑

为了实现投票，我们需要绑定交互事件，并通过ajax发起数据交互请求。

以下是示例代码：

var options = document.getElementById("options");
var question = document.getElementById("question");

// 加载投票问题和选项列表
function loadQuestion() {
    // 发送AJAX请求获取投票问题和选项列表
    ...
    // 根据返回数据设置问题和选项
    question.innerHTML = data.question;
    for (var i = 0; i < data.options.length; i++) {
        var item = data.options[i];
        var li = document.createElement("li");
        li.setAttribute("data-id", item.id);
        li.innerHTML = item.content;
        options.appendChild(li);
    }
}

// 发起投票请求
function vote() {
    var selectedOption = document.querySelector("#options li.selected");
    if (!selectedOption) {
        alert("请选择一个选项");
        return;
    }
    var optionId = selectedOption.getAttribute("data-id");
    // 发送AJAX请求提交投票结果
    ...
}

// 查看投票结果
function showResult() {
    // 发送AJAX请求获取投票结果
    ...
    // 显示投票结果
    ...
}

// 注册选项点击事件
options.addEventListener("click", function(e) {
    if (e.target.tagName === "LI") {
        var selected = document.querySelector("#options li.selected");
        if (selected) {
            selected.classList.remove("selected");
        }
        e.target.classList.add("selected");
    }
});

以上代码中，loadQuestion 函数会发起Ajax请求获取投票问题和选项列表，并根据返回数据更新页面内容。vote 函数会发起Ajax请求提交投票结果。showResult 函数发起Ajax请求获取投票结果并将结果显示到页面上。options 区域绑定 click 事件，根据点击项切换选定状态。

后端接口实现

后端接口需要提供投票的相关逻辑，同时要注意安全性。

以下是示例代码：

const express = require("express");
const bodyParser = require("body-parser");
const app = express();

// 问题列表
const questions = [{
    id: "1",
    question: "你最爱的水果是什么？",
    options: [{
        id: "1",
        content: "苹果"
    }, {
        id: "2",
        content: "香蕉"
    }, {
        id: "3",
        content: "橙子"
    }]
}, {
    id: "2",
    question: "你最爱的动物是什么？",
    options: [{
        id: "1",
        content: "猫"
    }, {
        id: "2",
        content: "狗"
    }, {
        id: "3",
        content: "熊猫"
    }]
}];

// 投票结果
let results = {};

// 设置允许跨域访问
app.all("*", function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    next();
});

// 解析POST请求
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 获取问题列表
app.get("/questions", function(req, res) {
    res.json(questions);
});

// 提交投票结果
app.post("/vote", function(req, res) {
    var optionId = req.body.optionId;
    if (!optionId) {
        res.status(400).json({ error: "参数错误" });
        return;
    }
    // 记录投票结果
    if (!results[optionId]) {
        results[optionId] = 1;
    } else {
        results[optionId]++;
    }
    res.json({ success: true });
});

// 获取投票结果
app.get("/result", function(req, res) {
    res.json(results);
});

app.listen(3000);

以上代码中，我们使用Express框架搭建了一个简单的后端应用。其中 questions 表示投票问题和选项， results 表示投票结果。 app.get("/questions", ...) 表示提供获取投票问题和选项列表的API， app.post("/vote", ...) 表示提交投票结果的API， app.get("/result", ...) 表示获取投票结果的API。在提交投票结果时，需要根据请求中的选项ID更新投票结果。

至此，我们基于js实现投票的实例代码就介绍完了。可以将前端页面部署在任意静态服务器上，将后端接口部署在服务器端环境，利用Ajax技术进行数据交互，实现一个简单的投票系统。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于js实现投票的实例代码 - Python技术站

基于js实现投票的实例代码

前端页面实现

页面布局

交互逻辑

后端接口实现

相关文章