ajax无刷新投票 示例代码

Ajax无刷新投票是指在网页上进行投票操作时，使用Ajax技术实现页面无需刷新即可更新投票结果的功能。通过Ajax，可以将投票结果发送到服务器进行处理，并将处理结果返回给网页，然后通过JavaScript将处理结果更新到页面上，从而实现无刷新投票的效果。

示例代码如下：

// HTML部分
<div id="vote">
  <h2>投票</h2>
  <p>请选择您喜欢的选项：</p>
  <input type="radio" name="option" value="option1">选项1
  <input type="radio" name="option" value="option2">选项2
  <input type="radio" name="option" value="option3">选项3
  <button onclick="vote()">提交</button>
</div>
<div id="result">
  <h2>投票结果</h2>
  <p>选项1：<span id="option1Count">0</span> 票</p>
  <p>选项2：<span id="option2Count">0</span> 票</p>
  <p>选项3：<span id="option3Count">0</span> 票</p>
</div>
// JavaScript部分
function vote() {
  var selectedOption = document.querySelector('input[name="option"]:checked').value;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        document.getElementById("option1Count").textContent = response.option1Count;
        document.getElementById("option2Count").textContent = response.option2Count;
        document.getElementById("option3Count").textContent = response.option3Count;
      } else {
        console.error('投票失败');
      }
    }
  };
  xhr.open("POST", "/vote", true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send("option=" + selectedOption);
}

上述代码中，首先在HTML部分定义了一个投票区域和一个投票结果区域。在投票区域中，用户可以选择一个选项并点击提交按钮进行投票。在投票结果区域中，显示了每个选项的投票数量。

在JavaScript部分，定义了一个vote函数，该函数会在用户点击提交按钮时被调用。在该函数中，首先获取用户选择的选项，然后创建一个XMLHttpRequest对象，并指定其onreadystatechange事件处理函数。在事件处理函数中，判断请求的状态是否为已完成（readyState === XMLHttpRequest.DONE），如果是，则判断请求的状态码是否为成功（status === 200）。如果请求成功，则将服务器返回的投票结果解析为JSON对象，并将投票结果更新到页面上。

通过调用open方法设置请求的方法（POST）、URL（/vote）和是否异步（true），调用setRequestHeader方法设置请求头，最后通过send方法发送请求，将用户的选择作为参数传递给服务器。