Maison > Article > base de données > Comment implémenter une fonction de vote en ligne simple à l'aide de MySQL et JavaScript

Comment implémenter une fonction de vote en ligne simple à l'aide de MySQL et JavaScript

PHPzoriginal: 2023-09-21 16:24:30737parcourir

Comment implémenter une fonction de vote en ligne simple à laide de MySQL et JavaScript

À l'ère moderne des médias sociaux, le vote en ligne est devenu une fonctionnalité importante sur de nombreux sites Web et plateformes. Cet article explique comment utiliser MySQL et JavaScript pour implémenter une fonction de vote en ligne simple et fournit des exemples de code spécifiques.

Créer une table de base de données

Tout d'abord, nous devons créer une table dans MySQL pour stocker les données liées au vote. On peut créer une table nommée vote, qui contient au moins les champs suivants :

id : l'identifiant unique du vote, qui peut utiliser un type entier auto-croissant.
titre : Le titre de vote, vous pouvez utiliser le type VARCHAR.
options : une liste d'options de vote, qui peuvent être stockées à l'aide de chaînes JSON, par exemple : ['option1', 'option2', 'option3'].
votes : Le nombre de votes pour chaque option, vous pouvez utiliser le type entier.

Voici un exemple de code pour créer une table de vote dans MySQL :

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

Insérer les données de vote

Ensuite, nous devons insérer les données de vote dans la table. Ici, nous pouvons écrire une instruction INSERT pour insérer la question de vote, les options et le nombre initial de votes dans le tableau. Voici l'exemple de code :

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

Création de l'interface frontale

Maintenant, nous commençons à écrire l'interface frontale, en utilisant HTML, CSS et JavaScript pour afficher les questions et options de vote, et gérer la logique de vote. Voici un exemple simple d'interface HTML :

<!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>

Gestion de la logique de vote

Dans le code JavaScript, nous devons écrire la logique pour interagir avec le backend. Premièrement, nous pouvons utiliser la technologie Ajax pour obtenir les données de vote du côté serveur et les afficher sur l'interface frontale. Voici l'exemple de 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;

Ensuite, nous devons également écrire la logique de vote. Lorsque l'utilisateur clique sur le bouton de vote, nous obtiendrons l'option sélectionnée par l'utilisateur et utiliserons Ajax pour envoyer les données de vote côté serveur pour mise à jour. Voici l'exemple de 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);
}

Gestion des demandes de vote

Enfin, nous devons écrire un script côté serveur pour gérer les demandes de vote. Ici, nous pouvons utiliser PHP pour gérer la requête POST et mettre à jour les données de vote dans la base de données. Voici l'exemple de code :

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

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

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

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

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

À ce stade, nous avons terminé les étapes de mise en œuvre d'une simple fonction de vote en ligne à l'aide de MySQL et JavaScript. Grâce à l'exemple de code ci-dessus, nous pouvons créer une page Web avec une fonctionnalité de vote et mettre à jour les résultats du vote en temps réel après le vote de l'utilisateur. Bien sûr, en plus des exemples de code ci-dessus, la fonction de vote elle-même doit également prendre en compte davantage de problèmes tels que la sécurité, l'expérience utilisateur et la gestion des erreurs, mais j'espère que cet article pourra vous fournir un guide de démarrage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JavaScript mysql json css ajax html 标识符字符串整数类型数据库

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter une fonction simple de navigation cartographique à l'aide de MySQL et RubyArticle suivant：Comment implémenter une fonction simple de navigation cartographique à l'aide de MySQL et Ruby

Articles Liés

Voir plus