Ψηφοφορία με AJAX και PHP

Ψηφοφορία AJAX

Σε αυτό το παράδειγμα AJAX, θα δείξουμε μια εφαρμογή ψηφοφορίας, όπου η ιστοσελίδα μπορεί να αποκτήσει αποτελέσματα χωρίς να ξαναφορτώσει:

Εως τώρα, σας αρέσει το PHP και το AJAX;

Yes:
No:

Αυτό το παράδειγμα περιλαμβάνει τέσσερα στοιχεία:

  • Φόρμα HTML
  • JavaScript
  • PHP page
  • Κείμενο αρχείο αποθήκευσης αποτελεσμάτων

Φόρμα HTML

Αυτό είναι μια σελίδα 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>

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 the data from the voting program.

It looks something like this:

0||0

The first number represents the "Yes" vote, 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

The JavaScript code is stored in "poll.js" and is 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
}

Παράδειγμα Επεξήγησης:

The stateChanged() and GetXmlHttpObject functions are with Αίτημα με AJAX και PHP The examples in this section are the same.

getVote() function

This function is executed when the user selects "yes" or "no" in the HTML form.

  1. Define the url (filename) to be sent to the server
  2. Add parameters (vote) to the url, which contain the content of the input field
  3. Add a random number to prevent the server from using cached files
  4. Call the GetXmlHttpObject function to create an XMLHTTP object and inform the object to execute the stateChanged function when a change is triggered
  5. Open an XMLHTTP object using the given url
  6. Send an HTTP request to the server

PHP page

The server page called by JavaScript code is a simple PHP file named "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>Αποτελέσματα:</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. Εκτύπωση γραφικών αποτελεσμάτων ψηφοφορίας