PHP och AJAX omröstning

AJAX-omröstning

I detta AJAX-exempel kommer vi att visa ett omröstningsprogram där webbsidan kan visa resultat utan att ladda om.

Hur gillar du PHP och AJAX hittills?

Ja:
Nej:

Exempeltaget inkluderar fyra element:

  • HTML-formulär
  • JavaScript
  • PHP-sida
  • Textfil för att lagra resultat

HTML-formulär

Detta är en HTML-sida. Den innehåller en enkel HTML-formulär samt en länk till ett JavaScript-fil:

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>Gillar du PHP och AJAX ännu?</h2>
<form>
Ja: 
<input type="radio" name="vote" 
value="0" onclick="getVote(this.value)">
<br />
Nej: 
<input type="radio" name="vote" 
value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>

Exempel på förklaring - HTML-formulär

Som du ser innehåller den övre HTML-sidan ett enkelt HTML-formulär med ett <div>-element som har två radiobuttons.

Så fungerar formuläret:

  • När användaren väljer "ja" eller "nej", utlöses en händelse
  • När händelsen utlöses, körs getVote()-funktionen
  • Formuläret är omgivet av en <div> med namnet "poll" när data returneras från getVote()-funktionen, returnerade data ersätter formuläret.

Textfil

Textfilen (poll_result.txt) lagrar data från voteringen.

Det liknar detta:

0||0

Det första numret representerar "Ja"-röstning, det andra numret representerar "Nej"-röstning.

Kommentarer:Kom ihåg att endast tillåta din webbserver att redigera denna textfil. Låt inte andra få åtkomst, utöver webbservern (PHP).

JavaScript

JavaScript-kod lagras i "poll.js" och kopplas samman med HTML-dokumentet:

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()} 
{ 
 om (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("poll").
 innerHTML=xmlHttp.responseText;
 } 
} 
function GetXmlHttpObject()
{ 
var objXMLHttp=null
om (window.XMLHttpRequest)
 {
 objXMLHttp=new XMLHttpRequest()
 }
annars om (window.ActiveXObject)
 {
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
return objXMLHttp
}

例子解释：

stateChanged() och GetXmlHttpObject-funktionerna är PHP och AJAX-forespåring Exempeln i denna sektion är samma.

getVote()-funktionen

Denna funktion körs när användaren väljer "ja" eller "nej" i HTML-formuläret.

  1. Definiera url:en (filnamn) som ska skickas till servern
  2. Lägg till parametrar (vote) till url:en, med innehållet från inputfältet
  3. Lägg till ett slumpmässigt nummer för att förhindra att servern använder cachade filer
  4. Anropa GetXmlHttpObject-funktionen för att skapa ett XMLHTTP-objekt och ange att objektet ska köra stateChanged-funktionen när en förändring inträffar
  5. Öppna XMLHTTP-objektet med en given url
  6. Skicka HTTP-forespårgsel till servern

PHP-sida

Servernsida som anropas av JavaScript-kod är en enkel PHP-fil med namnet "poll_vote.php".

<?php
$vote = $_REQUEST['vote'];
//hämta innehållet i textfil
$filename = "poll_result.txt";
$content = file($filename);
//lägg in innehåll i array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
om ($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. 输出图形化的投票结果