PHP และ AJAX การลงคะแนน

AJAX การลงคะแนนเสียง

ในตัวอย่าง AJAX นี้ เราจะแสดงโปรแกรมการลงคะแนนเสียง ที่หน้าเว็บไซต์สามารถได้รับผลลัพธ์โดยไม่ต้องโหลดเว็บไซต์อีกครั้ง:

จนถึงขณะนี้ คุณชื่นชอบ PHP และ AJAX ไหม?

Yes:
No:

ตัวอย่างนี้ประกอบด้วยส่วนประกอบสี่อย่าง:

  • ฟอร์ม HTML
  • JavaScript
  • PHP หน้า
  • เอกสารข้อความเก็บผลลัพธ์

ฟอร์ม HTML

นี่คือหน้า HTML นี้.มันประกอบด้วยฟอร์ม HTML ขั้นต้นและการเชื่อมโยงกับไฟล์ JavaScript:

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>คุณชื่นชอบ PHP และ AJAX จนถึงขณะนี้หรือไม่?</h2>
<form>
Yes: 
<input type="radio" name="vote" 
value="0" onclick="getVote(this.value)">
<br />
No: 
<input type="radio" name="vote" 
value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>

ตัวอย่างที่ชี้แจง - แบบฟอร์ม HTML

เหมือนที่คุณเห็นได้ หน้า HTML ที่สูงขึ้นมีแบบฟอร์ม HTML ที่เรียบง่าย ซึ่งมีองค์ประกอบ <div> ที่มีโปรงการเลือกเดียวกัน

แบบฟอร์มทำงานนี้:

  • เมื่อผู้ใช้เลือก "yes" หรือ "no" จะเกิดเหตุการณ์
  • เมื่อเกิดเหตุการณ์ จะทำฟังก์ชัน getVote()
  • ฝั่งตัวแบบฟอร์มนี้มี <div> ที่มีชื่อว่า "poll" ขณะที่ข้อมูลจากฟังก์ชัน getVote() กลับมา ข้อมูลที่กลับมาจะทดแทนแบบฟอร์มนี้

ไฟล์ข้อความ

ไฟล์ข้อความ (poll_result.txt) จะเก็บข้อมูลจากโปรแกรมการลงคะแนน

มันเหมือนนี้เช่นนี้:

0||0

ตัวเลขแรกแสดงถึงการลงคะแนน "Yes" ตัวเลขที่สองแสดงถึงการลงคะแนน "No"。

หมายเหตุ：จงระวังเฉยๆให้เซิร์ฟเวอร์เว็บของคุณเท่านั้นที่จะแก้ไขไฟล์ข้อความนี้ และไม่ให้ใครคนอื่นเข้าถึงสิทธิ์การเข้าถึง ยกเว้นเซิร์ฟเวอร์ (PHP)。

JavaScript

JavaScript 代码存储在 "poll.js" 中，并于 HTML 文档相连接：

var xmlHttp
function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="poll_vote.php"
url=url+"?vote="+int
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("poll").
 innerHTML=xmlHttp.responseText;
 } 
} 
function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
 {
 objXMLHttp=new XMLHttpRequest()
 }
else if (window.ActiveXObject)
 {
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
return objXMLHttp
}

ตัวอย่างที่ชี้แจง:

ฟังก์ชัน stateChanged() และ GetXmlHttpObject คือ PHP และ AJAX คำขอ ตัวอย่างในนี้เหมือนกัน

ฟังก์ชัน getVote()

ฟังก์ชันนี้จะทำงานเมื่อผู้ใช้เลือก "yes" หรือ "no" ในฟอร์ม HTML

  1. กำหนด URL ที่ส่งไปยังเซิร์ฟเวอร์ (ชื่อไฟล์)
  2. เพิ่มประมาณการ (vote) ใน URL ที่มีเนื้อหาของช่องบันทึก
  3. เพิ่มตัวเลขสุ่มเพื่อป้องกันเซิร์ฟเวอร์ใช้แฟ้มที่มีอยู่ในคลาย
  4. เรียกฟังก์ชัน GetXmlHttpObject ในการสร้าง XMLHTTP โอบเจ็กต์ และบอกให้โอบเจ็กต์นี้ทำงานเมื่อมีการเปลี่ยนแปลง
  5. เปิด XMLHTTP โอบเจ็กต์ด้วย URL ที่ให้
  6. ส่งคำขอ HTTP ไปยังเซิร์ฟเวอร์

PHP หน้า

โดย JavaScript โค้ดเรียกหน้าบริการเซิร์ฟเวอร์ที่มีชื่อว่า "poll_vote.php" คือไฟล์ PHP ง่ายๆ

<?php
$vote = $_REQUEST['vote'];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0)
 {
 $yes = $yes + 1;
 }
if ($vote == 1)
 {
 $no = $no + 1;
 }
//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif" 
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>

ตัวอย่างที่ชี้แจง:

ค่าที่เลือกมาจาก JavaScript จะมีการเกิดขึ้นดังนี้:

  1. ดึงเนื้อหาของแฟ้ม "poll_result.txt"
  2. จัดเก็บเนื้อหาของแฟ้มไปยังตัวแปร และเพิ่มค่าตัวแปรที่ถูกเลือกด้วย 1
  3. เขียนผลลัพธ์ไปยังแฟ้ม "poll_result.txt"
  4. ออกผลลัพธ์การเลือกของผู้ลงคะแนนเป็นรูปภาพ