How to implement a simple online voting function using MySQL and JavaScript-Mysql Tutorial-php.cn

How to implement a simple online voting function using MySQL and JavaScript

PHPz

Release： 2023-09-21 16:24:30

Original

751 people have browsed it

How to implement a simple online voting function using MySQL and JavaScript

In the modern era of social media, the online voting function has become an important feature in many websites and platforms . This article will introduce how to use MySQL and JavaScript to implement a simple online voting function and provide specific code examples.

Create database table

First, we need to create a table in MySQL to store voting-related data. We can create a table named vote, which contains at least the following fields:

id: the unique identifier of the vote, which can use a self-increasing integer type.
title: The voting title, you can use VARCHAR type.
options: A list of voting options, which can be stored using JSON strings, for example: ['option1', 'option2', 'option3'].
votes: The number of votes for each option, you can use integer type.

The following is a sample code to create a vote table in MySQL:

CREATE TABLE vote (
  id INT PRIMARY KEY AUTO_INCREMENT,
  title VARCHAR(255),
  options TEXT,
  votes INT
);

Copy after login

Insert voting data

Next, we need to create a vote table in the table Insert voting data into . Here we can write an INSERT statement to insert the voting question, options and initial number of votes into the table. The following is the sample code:

INSERT INTO vote (title, options, votes)
VALUES (
  '最喜欢的食物',
  '["汉堡", "披萨", "寿司"]',
  0
);

Copy after login

Create the front-end interface

Now we start to write the front-end interface, using HTML, CSS and JavaScript to display voting questions and options, and process voting logic. Here is a simple HTML interface example:

<!DOCTYPE html>
<html>
<head>
  <title>在线投票</title>
  <style>
    /* 样式代码 */
  </style>
</head>
<body>
  <h1>最喜欢的食物</h1>
  <ul id="options">
    <li><input type="radio" name="option" value="0"> 汉堡</li>
    <li><input type="radio" name="option" value="1"> 披萨</li>
    <li><input type="radio" name="option" value="2"> 寿司</li>
  </ul>
  <button onclick="vote()">投票</button>
  <p id="result"></p>

  <script>
    // JavaScript代码
  </script>
</body>
</html>

Copy after login

Handling voting logic

In the JavaScript code, we need to write the logic to interact with the backend. First, we can use Ajax technology to obtain voting data from the server side and display it on the front-end interface. The following is the sample code:

function getVote() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var vote = JSON.parse(xhr.responseText);
      document.getElementById("result").innerHTML = "总共有 " + vote.votes + " 票";
    }
  };
  xhr.open("GET", "get_vote.php", true);
  xhr.send();
}

window.onload = getVote;

Copy after login

Next, we also need to write the voting logic. When the user clicks the voting button, we will get the option selected by the user and use Ajax to send the voting data to the server side for update. Here is the sample code:

function vote() {
  var option = document.querySelector('input[name="option"]:checked').value;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var vote = JSON.parse(xhr.responseText);
      document.getElementById("result").innerHTML = "总共有 " + vote.votes + " 票";
    }
  };
  xhr.open("POST", "vote.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send("option=" + option);
}

Copy after login

Handling voting requests

Finally, we need to write a server-side script to handle voting requests. Here we can use PHP to handle the POST request and update the voting data in the database. The following is the sample code:

<?php
$option = $_POST['option'];

// 从数据库中获取投票数据
$vote = getVoteFromDatabase();

// 更新选项的投票数
$vote['votes'][$option]++;

// 将更新后的投票数据存回数据库
saveVoteToDatabase($vote);

// 将更新后的投票数据返回给前端
echo json_encode($vote);
?>

Copy after login

So far, we have completed the steps of using MySQL and JavaScript to implement a simple online voting function. Through the above code example, we can create a web page with voting functionality and update the voting results in real time after the user votes. Of course, in addition to the above code examples, the actual voting function also needs to consider more issues such as security, user experience, and error handling, but I hope this article can provide you with a starting guide.

The above is the detailed content of How to implement a simple online voting function using MySQL and JavaScript. For more information, please follow other related articles on the PHP Chinese website!