masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Tutorial asas pembangunan PHP Undian AJAX

Pengundian AJAX

Dalam contoh berikut, kami akan menunjukkan program pengundian yang melaluinya keputusan undian dipaparkan tanpa memuat semula halaman web.

Paparan halaman ditunjukkan di sebelah kanan

Apabila pengguna memilih salah satu daripada pilihan di atas, fungsi bernama "getVote()" akan dilaksanakan. Fungsi ini dicetuskan oleh peristiwa "onclick".

Contoh ini termasuk tiga bahagian

  • Borang HTML

  • Fail PHP

  • Fail TXT

Fail HTML:

Lihat 1.php untuk kod sumber 

<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script>
function getVote(int) {
  //创建 XMLHttpRequest 对象
  if (window.XMLHttpRequest) {
    // IE7+, Firefox, Chrome, Opera, Safari 执行代码
    xmlhttp=new XMLHttpRequest();
  } else {
    // IE6, IE5 执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  //创建在服务器响应就绪时执行的函数
  xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("poll").innerHTML=xmlhttp.responseText;
    }
  }
  //向服务器上的文件发送请求
  xmlhttp.open("GET","2.php?vote="+int,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<div id="poll">
<h3>你喜欢 PHP 和 AJAX 吗?</h3>
<!-- 用户选择一个选项，触发onclick事件，执行getVote()函数 -->
<form>
是:
<input type="radio" name="vote" value="0" onclick="getVote(this.value)">
<br>否:
<input type="radio" name="vote" value="1" onclick="getVote(this.value)">
</form>
</div>

</body>
</html>

Halaman HTML di atas mengandungi borang HTML ringkas dengan dua butang radio dalam elemen <div>

Borang berfungsi seperti ini:

  • Apabila pengguna memilih "ya" atau "tidak", peristiwa dicetuskan

  • Apabila acara dicetuskan, fungsi getVote() dilaksanakan

  • Di sekeliling borang ialah <div> Apabila data dikembalikan daripada fungsi getVote(), data yang dikembalikan menggantikan borang.

fungsi getVote() akan melaksanakan langkah berikut:

  • Cipta objek XMLHttpRequest

  • Dicipta dalam Fungsi dilaksanakan apabila respons pelayan sedia

  • Hantar permintaan kepada fail pada pelayan

  • Sila ambil perhatian parameter (q) ditambah hingga hujung URL ( Mengandungi kandungan senarai lungsur turun)

Fail PHP:

Pelayan yang dipanggil oleh JavaScript dalam perenggan di atas Halaman ialah fail PHP bernama "2.php": 

<?php
//过滤浏览器传过来的数据
$vote = htmlspecialchars($_REQUEST['vote']);

// 获取文件中存储的数据
$filename = "3.txt";
$content = file($filename);

// 将数据分割到数组中
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];

if ($vote == 0)
{
  $yes = $yes + 1;
}

if ($vote == 1)
{
  $no = $no + 1;
}

// 插入投票数据
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");//写入方式打开
fputs($fp,$insertvote);//将$insertvote写入文件中
fclose($fp);//关闭打开文件
?>

<h2>结果:</h2>
<table>
  <tr>
  <td>是:</td>
  <td>
  <span style="display: inline-block; background-color:green;
      width:<?php echo(100*round($yes/($no+$yes),2)); ?>px;
      height:20px;" ></span>
  <?php echo(100*round($yes/($no+$yes),2)); ?>%
  </td>
  </tr>
  <tr>
  <td>否:</td>
  <td>
  <span style="display: inline-block; background-color:red;
      width:<?php echo(100*round($no/($no+$yes),2)); ?>px;
      height:20px;"></span>
  <?php echo(100*round($no/($no+$yes),2)); ?>%
  </td>
  </tr>
</table>

Apabila nilai yang dipilih dihantar daripada JavaScript ke fail PHP, apa yang berlaku:

  • Dapatkan" poll_result.txt" Kandungan fail

  • Masukkan kandungan fail ke dalam pembolehubah dan tambah 1 pada pembolehubah yang dipilih

  • Tulis hasil" fail poll_result.txt"

  • Output keputusan pengundian grafik

Fail TXT

Fail teks (3.txt) menyimpan data daripada program pengundian.

Nampaknya seperti ini:

0||0

Nombor pertama mewakili undian "Ya", dan nombor kedua mewakili undian "Tidak".

Nota: Ingat untuk hanya membenarkan pelayan web anda mengedit fail teks ini. Jangan biarkan orang lain mendapat akses kecuali pelayan web (PHP).



Pengalaman belajar

Contoh ini terutamanya termasuk mata pengetahuan berikut:

  • Asas borang: butang radio

  • peristiwa onclick: berlaku apabila objek diklik

  • Panggilan fungsi, hantaran nilai fungsi

  • Penciptaan objek AJAX XMLHttpRequest, fungsi yang dilaksanakan apabila pelayan bertindak balas dan menghantar permintaan kepada fail pada pelayan: Lihat 1-5 untuk pengalaman pembelajaran

  • HTML DOM getElementById() kaedah: Mengembalikan rujukan kepada objek pertama dengan ID yang ditentukan

PHP berkaitan operasi pada fail:

  • fail(): baca keseluruhan fail ke dalam tatasusunan

  • fopen(): buka fail atau URL

  • fputs(): Tulis ke fail

  • fclose(): Tutup fail yang terbuka

Berkaitan fungsi:

  • htmlspecialchars(): Tukar aksara yang dipratentukan kepada entiti HTML

  • explode(): Putuskan rentetan Untuk tatasusunan

Meneruskan pembelajaran
||
<html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script> function getVote(int) { //创建 XMLHttpRequest 对象 if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //创建在服务器响应就绪时执行的函数 xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("poll").innerHTML=xmlhttp.responseText; } } //向服务器上的文件发送请求 xmlhttp.open("GET","2.php?vote="+int,true); xmlhttp.send(); } </script> </head> <body> <div id="poll"> <h3>你喜欢 PHP 和 AJAX 吗?</h3> <!-- 用户选择一个选项，触发onclick事件，执行getVote()函数 --> <form> 是: <input type="radio" name="vote" value="0" onclick="getVote(this.value)"> <br>否: <input type="radio" name="vote" value="1" onclick="getVote(this.value)"> </form> </div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492424 permainan