PHP en AJAX Stemmen

AJAX Stem

In dit AJAX-voorbeeld demonstreren we een stemprogramma waarbij de pagina niet opnieuw hoeft te laden om de resultaten te verkrijgen.

Tot nu toe, vind je PHP en AJAX leuk?

Yes:
No:

Dit voorbeeld omvat vier elementen:

  • HTML-formulier
  • JavaScript
  • PHP-pagina
  • Tekstbestand voor opslag van resultaten

HTML-formulier

Dit is een HTML-pagina. Het bevat een eenvoudige HTML-formulier en een koppeling naar een JavaScript-bestand:

<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>

Example Explanation - HTML Form

As you can see, the above HTML page contains a simple HTML form with a <div> element containing two radio buttons.

How the form works:

  • An event is triggered when the user selects "yes" or "no"
  • The getVote() function is executed when an event is triggered
  • The form is surrounded by a <div> named "poll". When data is returned from the getVote() function, the returned data replaces the form.

Text file

The text file (poll_result.txt) stores data from the voting program.

It looks something like this:

0||0

The first number represents the "Yes" vote, and the second number represents the "No" vote.

Note:Remember to allow only your web server to edit this text file. Do not give others access rights, except for the web server (PHP).

JavaScript

JavaScript code is stored in "poll.js" and linked to the HTML document:

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
}

Voorbeeld uitleg:

De functies stateChanged() en GetXmlHttpObject zijn gelijk aan PHP en AJAX Verzoeken Het voorbeeld in deze sectie is hetzelfde.

getVote() functie

Deze functie wordt uitgevoerd wanneer de gebruiker "ja" of "nee" selecteert in het HTML-formulier

  1. Definieer de URL die naar de server wordt gestuurd (bestandsnaam)
  2. Voeg parameters toe aan de URL (vote), inclusief de inhoud van het invoerveld
  3. Voeg een willekeurig getal toe om te voorkomen dat de server een gecachte bestand gebruikt
  4. Roep de functie GetXmlHttpObject aan om een XMLHTTP-object te maken en geef het object opdracht om de functie stateChanged uit te voeren wanneer er een verandering optreedt
  5. Open een XMLHTTP-object met de gegeven URL
  6. Verstuur een HTTP-verzoek naar de server

PHP-pagina

De serverpagina aangeroepen door JavaScript-code is een eenvoudige PHP-bestand genaamd "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>
<tdJa:</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>Nee:</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>

Voorbeeld uitleg:

De gekozen waarde komt van JavaScript en dan gebeurt het volgende:

  1. Haal de inhoud van het bestand "poll_result.txt" op
  2. Plaats de inhoud van het bestand in een variabele en voeg 1 toe aan de gekozen variabele
  3. Schrijf de resultaten naar het bestand "poll_result.txt"
  4. Weergeef de grafische resultaten van de stemming