PHP AJAX Voting

AJAX ລົງຄະແນນສຽງ

ໃນກໍລະນີ AJAX ນີ້ພວກເຮົາຈະສະແດງການລົງຄະແນນສຽງທີ່ບໍ່ຕ້ອງໄດ້ຂັບເຄື່ອງເວັບໄຊມາຫລັງຈາກລົງຄະແນນ.

ຈະຕອບວ່າທ່ານມັກ PHP ແລະ AJAX ຫນັງຄິດຫລາຍຫລືບໍ່?

Yes:
No:

ກໍລະນີນີ້ກວມມີສີ່ປ່ຽນ:

  • HTML ຟອມ
  • JavaScript
  • PHP Page
  • ສະໜາມຂອງຂໍ້ຄວາມຄຳຕອບ

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 ຟອມທີ່ມີສອງກົດລະບຽບ.

ຟອມຈະດຳເນີນວຽກດັ່ງນັ້ນ:

  • ເມື່ອຜູ້ນຳໃຊ້ເລືອກ "yes" ຫຼື "no", ຈະຖືກຈັດຕັ້ງເຫດການ
  • ເມື່ອເຫດການຖືກຈັດຕັ້ງ, ຈະດຳເນີນຫົວຫນ້າ getVote()
  • ບັນທິດ "poll" ວົງວາງຟອມ. ເມື່ອຂໍ້ມູນຈາກຫົວຫນ້າ getVote() ກັບຄືນ, ຂໍ້ມູນຈະແທນບ່ອນຟອມ.

ບັນນາທິດ

ບັນນາທິດ (poll_result.txt) ຂອງຂໍ້ມູນຈາກໂຄງການລົງຄະແນນ.

ມັນຄືກັບນີ້:

0||0

ເລກທຳອິດສະແດງວ່າ "Yes" ການລົງຄະແນນ, ເລກທີສອງສະແດງວ່າ "No" ການລົງຄະແນນ.

ຄວາມຄິດຕາມ:ຍັງມີຄວາມຄິດດີພຽງແຕ່ວ່າ web 服务器ຂອງທ່ານຈະເປັນຜູ້ເລືອກມີສິດທີ່ເລືອກມີສິດໃນບັນນາທິດຂໍ້ຄວາມ. ບໍ່ອະນຸຍາດໃຫ້ຜູ້ອື່ນໄດ້ເຂົ້າເຖິງ, ນອກຈາກ web 服务器 (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() Function ແລະ GetXmlHttpObject Function ແມ່ນກັບ PHP AJAX ຂໍ້ສັ່ງ ກໍານົດທີ່ມີຄວາມຄິດດຽວກັນ

getVote() Function

ການດຳເນີນ Function ທີ່ getVote() ເມື່ອຜູ້ນຳໃຊ້ເລືອກ "yes" ຫຼື "no" ໃນ HTML Form

  1. ກຳນົດ URL ທີ່ສົ່ງໄປທີ່ສະຖານນີ (ບາງຈຸດມຸ່ງ)
  2. ສົ່ງການປ້ອນຂໍ້ມູນ (vote) ໃຫ້ສະຖານນີກັບຂໍ້ມູນບັນຊີ
  3. ຕິດຕາມຫຼັງທີ່ສຳລັບປ້ອງກັນສະຖານນີຈາກການໃຊ້ບັນຊີບັນຊີບັນຊີ
  4. ເອິ້ນຫຍັງ GetXmlHttpObject Function ເພື່ອສ້າງ XMLHTTP Object ແລະແຈ້ງໃຫ້ Object XMLHTTP ດຳເນີນ stateChanged Function ເມື່ອເກີດການປ່ຽນແປງ
  5. ເປີດ XMLHTTP Object ທີ່ຕ້ອງການ URL
  6. ສົ່ງຂໍ້ມູນ HTTP ໄປທີ່ສະຖານນີ

PHP Page

ບ່ອນທີ່ໂຄງການ JavaScript ສາມາດໂຫຼດໄດ້ຖືກໂທມາໂດຍສານ PHP ທີ່ຊື່ "poll_vote.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. ພັດທະນາຜົນການລົງຄະແນນສຽງທີ່ສະແດງຈຸລັງ