PHP og AJAX Afstemning

AJAX-afstemning

I denne AJAX-eksempel vil vi demonstrere en afstemningsprogram, hvor webstedet kan få resultater uden at genindlæse siden.

Indtil videre, kan du lide PHP og AJAX?

Ja:
Nej:

Dette eksempel inkluderer fire elementer:

  • HTML-formular
  • JavaScript
  • PHP-side
  • Tekstfil til opbevaring af resultater

HTML-formular

Dette er en HTML-side. Den indeholder en simpel HTML-formular samt en forbindelse til en JavaScript-fil:

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>Har du det godt med PHP og AJAX indtil videre?</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>

Eksempel på forklaring - HTML-formular

Som du kan se, indeholder den øverste HTML-side en simpel HTML-formular med et <div>-element, der har to radioknapper.

Sådan fungerer formularen:

  • En begivenhed udløses, når brugeren vælger "ja" eller "nej"
  • Kør getVote() funktionen, når et event udløses
  • Formularen omgivet af en <div> med navnet "poll" når data returneres fra getVote() funktionen, erstattes af formularen.

Tekstfil

Tekstfilen (poll_result.txt) gemmer data fra stemmeindhentningsprogrammet.

Det ligner dette:

0||0

Det første tal repræsenterer "Ja"-stemmer, det andet tal repræsenterer "Nej"-stemmer.

Bemærk:Husk kun at tillade din webserver at redigere denne tekstfil. Lad ikke andre få adgang, medmindre det er webserveren (PHP).

JavaScript

JavaScript-kode gemmes i "poll.js" og tilkobles 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()} 
{ 
 hvis (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("poll").
 innerHTML=xmlHttp.responseText;
 } 
} 
function GetXmlHttpObject()
{ 
var objXMLHttp=null
hvis (window.XMLHttpRequest)
 {
 objXMLHttp=new XMLHttpRequest()
 }
ellers hvis (window.ActiveXObject)
 {
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
return objXMLHttp
}

Eksempel forklaring:

stateChanged() og GetXmlHttpObject-funktionerne er PHP og AJAX Anmodning Eksemplet i denne sektion er det samme.

getVote() funktionen

Denne funktion udføres, når brugeren vælger "ja" eller "nej" i HTML-formen.

  1. Definer den url, der sendes til serveren (filnavn)
  2. Tilføj parameteren (vote) til url'en, som indeholder indholdet af inputfeltet
  3. Tilføj et tilfældigt tal for at forhindre serveren i at bruge cachede filer
  4. Kald GetXmlHttpObject-funktionen for at oprette XMLHTTP-objektet og fortæl objektet at udføre stateChanged-funktionen, når der opstår en ændring
  5. Åbn XMLHTTP-objektet med den givne url
  6. Send HTTP-forespørgsel til serveren

PHP-side

Den server-side side, der kaldes af JavaScript-koden, er en simpel PHP-fil med navnet "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];
hvis ($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>Resultat:</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>

Eksempel forklaring:

Værdien, der sendes fra JavaScript, vil derefter være:

  1. Hent indholdet af filen "poll_result.txt"
  2. Sæt filindholdet ind i en variabel og tilføj 1 til den valgte variabel
  3. Skriv resultaterne til filen "poll_result.txt"
  4. Udskriv grafiske afstemningsresultater