رأی‌گیری با AJAX در PHP

رأیگیری 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> با دو دکمه رادیویی دارد.

اینگونه فرم کار می‌کند:

  • وقتی کاربر "بله" یا "خیر" را انتخاب می‌کند، یک رویداد فعال می‌شود
  • هنگامی که رویداد فعال می‌شود، تابع getVote() اجرا می‌شود
  • فرمول "poll" به عنوان یک <div> حلقه شده است. هنگامی که داده‌ها از تابع getVote() بازمی‌گردد، داده‌های بازگشتی جایگزین فرم می‌شود.

فایل متنی

داده‌های برنامه رأی‌گیری در فایل متنی (poll_result.txt) ذخیره می‌شود.

مثل این است که:

0||0

عدد اول نشان‌دهنده رأی "بله" است و عدد دوم نشان‌دهنده رأی "خیر" است.

توضیحات:به یاد داشته باشید که فقط سرور وب خود را مجاز به ویرایش این فایل متنی کنید. اجازه دسترسی به دیگران را، به جز سرور وب (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
}

Example Explanation:

توابع stateChanged() و GetXmlHttpObject با درخواست‌های AJAX با PHP مثال‌های این بخش مشابه هستند.

توابع getVote()

این تابع هنگامی که کاربر در فرم HTML گزینه "بله" یا "خیر" را انتخاب می‌کند، اجرا می‌شود.

  1. URL ارسالی به سرور را (نام فایل) تعریف کنید
  2. پارامتر (vote) را به URL اضافه کنید که شامل محتوای فیلد ورودی است
  3. یک عدد تصادفی اضافه کنید تا از استفاده سرور از فایل‌های ذخیره شده جلوگیری شود
  4. با فراخوانی تابع GetXmlHttpObject برای ایجاد شیء XMLHTTP و اطلاع دادن به آن که هنگام بروز تغییرات، تابع stateChanged اجرا شود
  5. با استفاده از URL داده شده، شیء XMLHTTP باز می‌شود
  6. درخواست HTTP به سرور ارسال می‌شود

صفحه PHP

صفحه سرور که توسط کد 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>

Example Explanation:

The selected value is transmitted from JavaScript, and then the following will occur:

  1. Get the content of the "poll_result.txt" file
  2. Put the file content into a variable and add 1 to the selected variable
  3. Write the results to the "poll_result.txt" file
  4. Output graphical voting results