MySQLとJavaScriptを使った簡単なオンライン投票機能の実装方法-mysql チュートリアル-php.cn

MySQLとJavaScriptを使った簡単なオンライン投票機能の実装方法

PHPz

リリース： 2023-09-21 16:24:30

オリジナル

802 人が閲覧しました

MySQLとJavaScriptを使った簡単なオンライン投票機能の実装方法

MySQL と JavaScript を使用して簡単なオンライン投票機能を実装する方法

ソーシャルメディアの現代において、オンライン投票機能は多くの Web サイトで重要な機能になっています。そしてプラットフォーム。この記事では、MySQL と JavaScript を使用して簡単なオンライン投票機能を実装する方法と、具体的なコード例を紹介します。

データベーステーブルの作成

まず、投票関連データを保存するテーブルを MySQL に作成する必要があります。少なくとも次のフィールドを含む、vote という名前のテーブルを作成できます。

id: 投票の一意の識別子。自己増加する整数型を使用できます。
title: 投票タイトル。VARCHAR型が使用できます。
options: 投票オプションのリスト。JSON 文字列を使用して保存できます (例: ['option1', 'option2', 'option3'])。
votes: 各オプションの投票数。整数型を使用できます。

以下は、MySQL で投票テーブルを作成するサンプルコードです:

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

ログイン後にコピー

投票データの挿入

次に、次のことを行う必要があります。テーブルに投票テーブルを作成します。に投票データを挿入します。ここで INSERT ステートメントを作成して、投票の質問、オプション、初期投票数をテーブルに挿入します。サンプルコードは次のとおりです。

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

ログイン後にコピー

フロントエンドインターフェイスの作成

次に、HTML、CSS、JavaScript を使用してフロントエンドインターフェイスの作成を開始します。投票の質問と選択肢を表示し、投票ロジックを処理します。簡単な 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>

ログイン後にコピー

投票ロジックの処理

JavaScript コードでは、バックエンドと対話するロジックを記述する必要があります。まず、Ajax テクノロジーを使用してサーバー側から投票データを取得し、フロントエンドインターフェイスに表示できます。以下はサンプルコードです:

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;

ログイン後にコピー

次に、投票ロジックも記述する必要があります。ユーザーが投票ボタンをクリックすると、ユーザーが選択したオプションを取得し、Ajax を使用して投票データをサーバー側に送信して更新します。サンプルコードは次のとおりです。

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

ログイン後にコピー

投票リクエストの処理

最後に、投票リクエストを処理するサーバー側スクリプトを作成する必要があります。ここでは、PHP を使用して POST リクエストを処理し、データベース内の投票データを更新できます。サンプルコードは次のとおりです。

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

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

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

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

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

ログイン後にコピー

ここまでで、MySQL と JavaScript を使用して簡単なオンライン投票機能を実装する手順が完了しました。上記のコード例を通じて、投票機能を備えた Web ページを作成し、ユーザーの投票後に投票結果をリアルタイムで更新できます。もちろん、上記のコード例に加えて、実際の投票機能では、セキュリティ、ユーザーエクスペリエンス、エラー処理など、さらに多くの問題を考慮する必要がありますが、この記事が開始ガイドになれば幸いです。

以上がMySQLとJavaScriptを使った簡単なオンライン投票機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。