ပီဟ နှင့် အက်ဒိစ မဲဆွေးနွေး

AJAX အမှတ်ပေး

အဆိုပါ AJAX အမှတ်ပေး အမှတ်သင်းမှု တွင် ကျွန်တော်တို့သည် ဝတ္ထုကို အသုံးပြု၍ စာတမ်းအသစ် အသုံးပြုသော စာမျက်နှာ ကို ပြသပါမည်။

အခြေခံ အားဖြင့် သင်သည် PHP နှင့် AJAX ကို စိတ်ဝင်စားပါသလား။

Yes:
No:

အဆိုပါ အချက်အလက် များ အတွက် ပါဝင်သည့် အချက်အလက် ၄ ခု ပါဝင်သည်။

  • HTML ပေါင်းစား
  • JavaScript
  • PHP စာရင်း
  • ရလဒ် ရှိသော စာတမ်း

HTML ပေါင်းစား

ဒါ သည် HTML စားသုံး ပါသည်။ အကြောင်းကြောင်း အချက်အလက်များ တစ်ခု နှင့် JavaScript ဖိုင်၏ ချိတ်ဆက်မှု ပါဝင်သည်။

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>Do you like PHP and AJAX so far?</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() 函数
  • 围绕该表单的是名为 "poll" 的 <div>。当数据从 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() 和 GetXmlHttpObject 函数与 ပီဟ နှင့် အက်ဒိစ တောင်းဆိုခြင်း 这一节中的例子相同。

getVote() 函数

当用户在 HTML 表单中选择 "yes" 或 "no" 时，该函数就会执行。

  1. 定义发送到服务器的 url （文件名）
  2. 向 url 添加参数 (vote)，参数中带有输入字段的内容
  3. လက်ပြန်တင် အချိန် ပြောင်းလဲမှု ကို ချွတ်လွတ်ကြောင်း
  4. GetXmlHttpObject စကားလုံး အသုံးပြု၍ XMLHTTP အရင်းအမြစ် ကို ဖွင့်ပြီး အရင်းအမြစ် အသစ် အချိန် ပြောင်းလဲသောအခါ stateChanged စကားလုံး အသုံးပြု၍ ပြောင်းလဲမှု အသုံးပြုကြောင်း
  5. ခုနစ်ချက်ချိန် အသုံးပြု၍ XMLHTTP အရင်းအမြစ် ကို ဖွင့်ကြောင်း
  6. လက်ပြန်တင် ကို လက်ပြန်တင် ကန် ကို ပို့လျှောက်ကြောင်း

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. ဖိုင်အရေးအချင်း အား လမ်းကြောင်းကို ထပ်ထည့် ၁
  3. ရလဒ် အား "poll_result.txt" ဖိုင်သို့ ရေးသား
  4. အော်ဂန့်များ ရဲ့ အဓိကအရာ ကို ရေးသား