使用JavaScript开发网页投票应用-猿码集

使用JavaScript开发网页投票应用

在现代网络中，投票应用广泛应用于各种网站。今天我们将介绍如何使用JavaScript开发一个简单的网页投票应用。该应用程序将有一个问题和多个选项。用户可以选择一个选项，然后单击“投票”按钮提交他们的选择。我们先从HTML开始。

1. HTML部分

首先，我们需要一个HTML代码，它有一个问题和多个选项。

<h2>Which is your favorite color?</h2>
<form>
  <div>
    <input type="radio" id="red" name="color" value="Red">
    <label for="red">Red</label>
  </div>
  <div>
    <input type="radio" id="blue" name="color" value="Blue">
    <label for="blue">Blue</label>
  </div>
  <div>
    <input type="radio" id="green" name="color" value="Green">
    <label for="green">Green</label>
  </div>
  <button type="button" onclick="vote()">Vote</button>
</form>

在这个HTML代码中，我们使用了三个单选按钮作为选项，并将其放置在HTML表单中。当用户单击“投票”按钮时，它将调用名为“vote（）”的JavaScript函数。现在让我们来看看这个JavaScript函数的实现。

2. JavaScript部分

在这个JavaScript代码片段中，我们将创建一个vote函数。通过获取用户的选项，它将向服务器发送POST请求。服务器将对投票进行计数，并返回投票结果。我们还将在与结果一起显示用户投票的消息。

function vote() {
  var selectedOption = document.querySelector('input[name="color"]:checked').value;
  var request = new XMLHttpRequest();
  request.open('POST', '/vote');
  request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  request.onload = function() {
    if (request.status === 200) {
      var response = JSON.parse(request.responseText);
      var message = 'You voted for ' + response.color + ', and ' +
                    response.votes + ' people agree!';
      alert(message);
    }
  };
  var data = 'color=' + encodeURIComponent(selectedOption);
  request.send(data);
}

首先，我们通过查询已选选项的值来获取用户的选择。然后，我们使用XMLHttpRequest对象的POST方法向服务器发送一个包含用户选择的HTTP请求。”Content-Type“头告诉服务器请求的内容是表单数据。

接下来，我们定义一个回调函数来处理服务器响应。当请求成功时（HTTP状态码为200），它将解析JSON响应，并使用alert（）函数显示用户投票的消息。

3. 服务器部分

我们将使用Node.js和Express.js来实现服务器部分。我们需要将表单POST请求路由到一个处理程序，该处理程序将由服务器计算投票，并返回JSON响应。

var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.urlencoded({ extended: true }));
var votes = {
  'Red': 0,
  'Blue': 0,
  'Green': 0
};
app.post('/vote', function(req, res) {
  var selectedOption = req.body.color;
  votes[selectedOption]++;
  var response = {
    'color': selectedOption,
    'votes': votes[selectedOption]
  };
  res.send(JSON.stringify(response));
});
app.listen(3000, function() {
  console.log('App listening on port 3000!');
});

我们首先包含必要的依赖项，即Express.js和body-parser。接下来，我们定义一个express应用程序和一个/vote路由，该路由将处理POST请求。

当请求到达服务器时，我们从请求的主体中获取颜色选项，然后在投票计数器中增加该颜色的投票计数。接下来，我们将颜色和其所获得的票数包含在响应中，并将其作为JSON字符串返回。

最后，我们启动服务器并监听3000端口。现在，我们已经完成了网页投票应用程序的开发。从浏览器中加载页面并单击“投票”按钮，我们可以将投票提交到服务器，并查看投票结果。

总结

本文详细介绍了如何使用JavaScript开发网页投票应用程序。我们从HTML开始编写，然后介绍了实现该应用程序所需的JavaScript和服务器端代码。

JavaScript代码通过获取用户的选项并将其发送到服务器，实现了用户投票。服务器代码计算每个颜色选项的投票数，并将投票结果返回给客户端。在客户端，我们使用alert（）函数显示了用户投票的消息。

通过本文的介绍，您可以轻松地将此应用程序扩展到支持多个问题和选项，并将其应用于您自己的网站和应用程序中。

使用JavaScript开发网页投票应用