Heim > Artikel > Datenbank > So implementieren Sie eine einfache Online-Abstimmungsfunktion mit MySQL und JavaScript

So implementieren Sie eine einfache Online-Abstimmungsfunktion mit MySQL und JavaScript

PHPzOriginal: 2023-09-21 16:24:30737Durchsuche

Im modernen Zeitalter der sozialen Medien ist Online-Abstimmung auf vielen Websites und Plattformen zu einem wichtigen Feature geworden. In diesem Artikel wird erläutert, wie Sie mithilfe von MySQL und JavaScript eine einfache Online-Abstimmungsfunktion implementieren, und es werden spezifische Codebeispiele bereitgestellt.

Datenbanktabelle erstellen

Zuerst müssen wir eine Tabelle in MySQL erstellen, um wahlbezogene Daten zu speichern. Wir können eine Tabelle mit dem Namen „vote“ erstellen, die mindestens die folgenden Felder enthält:

id: die eindeutige Kennung der Abstimmung, die einen sich selbst erhöhenden Ganzzahltyp verwenden kann.
Titel: Der Abstimmungstitel, Sie können den Typ VARCHAR verwenden.
Optionen: Eine Liste von Abstimmungsoptionen, die mit JSON-Strings gespeichert werden können, zum Beispiel: ['option1', 'option2', 'option3'].
Stimmen: Die Anzahl der Stimmen für jede Option, Sie können einen Ganzzahltyp verwenden.

Das Folgende ist der Beispielcode zum Erstellen einer Abstimmungstabelle in MySQL:

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

Abstimmungsdaten einfügen

Als nächstes müssen wir Abstimmungsdaten in die Tabelle einfügen. Hier können wir eine INSERT-Anweisung schreiben, um die Abstimmungsfrage, Optionen und die anfängliche Anzahl der Stimmen in die Tabelle einzufügen. Das Folgende ist der Beispielcode:

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

Erstellen der Front-End-Schnittstelle

Jetzt beginnen wir mit dem Schreiben der Front-End-Schnittstelle. Dabei verwenden wir HTML, CSS und JavaScript, um Abstimmungsfragen und -optionen anzuzeigen und die Abstimmungslogik zu verwalten. Hier ist ein einfaches Beispiel für eine HTML-Schnittstelle:

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

Umgang mit der Abstimmungslogik

Im JavaScript-Code müssen wir die Logik für die Interaktion mit dem Backend schreiben. Erstens können wir die Ajax-Technologie verwenden, um Abstimmungsdaten vom Server abzurufen und sie auf der Front-End-Schnittstelle anzuzeigen. Hier ist der Beispielcode:

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;

Als nächstes müssen wir auch die Abstimmungslogik schreiben. Wenn der Benutzer auf die Schaltfläche „Abstimmung“ klickt, erhalten wir die vom Benutzer ausgewählte Option und verwenden Ajax, um die Abstimmungsdaten zur Aktualisierung an den Server zu senden. Hier ist der Beispielcode:

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);
}

Umgang mit Abstimmungsanfragen

Schließlich müssen wir ein serverseitiges Skript schreiben, um Abstimmungsanfragen zu bearbeiten. Hier können wir PHP verwenden, um die POST-Anfrage zu verarbeiten und die Abstimmungsdaten in der Datenbank zu aktualisieren. Hier ist der Beispielcode:

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

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

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

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

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

Zu diesem Zeitpunkt haben wir die Schritte zur Implementierung einer einfachen Online-Abstimmungsfunktion mithilfe von MySQL und JavaScript abgeschlossen. Mit dem obigen Codebeispiel können wir eine Webseite mit Abstimmungsfunktion erstellen und die Abstimmungsergebnisse in Echtzeit aktualisieren, nachdem der Benutzer abgestimmt hat. Natürlich muss die eigentliche Abstimmungsfunktion zusätzlich zu den oben genannten Codebeispielen auch weitere Aspekte wie Sicherheit, Benutzererfahrung und Fehlerbehandlung berücksichtigen, aber ich hoffe, dieser Artikel kann Ihnen einen Einstiegsleitfaden bieten.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine einfache Online-Abstimmungsfunktion mit MySQL und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie eine einfache Kartennavigationsfunktion mit MySQL und RubyNächster Artikel：So implementieren Sie eine einfache Kartennavigationsfunktion mit MySQL und Ruby

In Verbindung stehende Artikel

Mehr sehen