Rumah > Artikel > pangkalan data > Bagaimana untuk melaksanakan fungsi pengundian dalam talian yang mudah menggunakan MySQL dan JavaScript

Bagaimana untuk melaksanakan fungsi pengundian dalam talian yang mudah menggunakan MySQL dan JavaScript

PHPzasal: 2023-09-21 16:24:30676semak imbas

Cara menggunakan MySQL dan JavaScript untuk melaksanakan fungsi pengundian dalam talian yang mudah

Dalam era moden media sosial, fungsi pengundian dalam talian telah menjadi ciri biasa pada banyak laman web dan ciri penting dalam platform. Artikel ini akan memperkenalkan cara menggunakan MySQL dan JavaScript untuk melaksanakan fungsi pengundian dalam talian yang mudah dan menyediakan contoh kod khusus.

Buat jadual pangkalan data

Pertama, kita perlu mencipta jadual dalam MySQL untuk menyimpan data berkaitan pengundian. Kita boleh membuat jadual bernama undian, yang mengandungi sekurang-kurangnya medan berikut:

id: pengecam unik undian, yang boleh menggunakan jenis integer yang meningkat sendiri.
title: Soalan undian boleh menggunakan jenis VARCHAR.
options: Senarai pilihan pengundian, yang boleh disimpan menggunakan rentetan JSON, contohnya: ['option1', 'option2', 'option3'].
undi: Bilangan undian untuk setiap pilihan, anda boleh menggunakan jenis integer.

Berikut ialah contoh kod untuk membuat jadual undian dalam MySQL:

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

Masukkan data pengundian

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

Mencipta antara muka hadapan

Sekarang kita mula menulis antara muka hadapan, menggunakan HTML , CSS dan JavaScript untuk memaparkan soalan dan pilihan pengundian, dan mengendalikan logik pengundian. Berikut ialah contoh antara muka HTML yang mudah:

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

Mengendalikan logik pengundian

Dalam kod JavaScript, kita perlu menulis kod yang berinteraksi dengan logik bahagian belakang. Pertama, kita boleh menggunakan teknologi Ajax untuk mendapatkan data pengundian dari bahagian pelayan dan memaparkannya pada antara muka hadapan. Berikut ialah kod contoh:

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;

Seterusnya, kita juga perlu menulis logik pengundian. Apabila pengguna mengklik butang mengundi, kami akan mendapat pilihan yang dipilih oleh pengguna dan menggunakan Ajax untuk menghantar data undian ke bahagian pelayan untuk dikemas kini. Berikut ialah kod contoh:

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

Mengendalikan permintaan pengundian

Akhir sekali, kami perlu menulis skrip sebelah pelayan untuk mengendalikan permintaan pengundian. Di sini kita boleh menggunakan PHP untuk mengendalikan permintaan POST dan mengemas kini data pengundian dalam pangkalan data. Berikut ialah kod sampel:

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

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

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

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

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

Pada ketika ini, kami telah menyelesaikan langkah-langkah untuk melaksanakan fungsi pengundian dalam talian yang mudah menggunakan MySQL dan JavaScript. Dengan contoh kod di atas, kami boleh membuat halaman web dengan fungsi undian dan mengemas kini keputusan pengundian dalam masa nyata selepas pengguna mengundi. Sudah tentu, sebagai tambahan kepada contoh kod di atas, fungsi pengundian sebenar juga perlu mempertimbangkan lebih banyak isu seperti keselamatan, pengalaman pengguna dan pengendalian ralat, tetapi saya harap artikel ini dapat memberi anda panduan untuk bermula.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi pengundian dalam talian yang mudah menggunakan MySQL dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk melaksanakan fungsi navigasi peta mudah menggunakan MySQL dan RubyArtikel seterusnya：Bagaimana untuk melaksanakan fungsi navigasi peta mudah menggunakan MySQL dan Ruby

Artikel berkaitan

Lihat lagi