Bagaimana untuk melaksanakan fungsi pengundian dalam talian yang mudah menggunakan MySQL dan JavaScript-tutorial mysql-php.cn

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

PHPz

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

asal

815 orang telah melayarinya

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

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

Salin selepas log masuk

Masukkan data pengundian

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

Salin selepas log masuk

Mencipta antara muka hadapan

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

Salin selepas log masuk

Mengendalikan logik pengundian

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;

Salin selepas log masuk

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

Salin selepas log masuk

Mengendalikan permintaan pengundian

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

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

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

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

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

Salin selepas log masuk

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!