PHP und AJAX-Abstimmung

AJAX Abstimmung

In diesem AJAX-Beispiel zeigen wir ein Abstimmungsprogramm, bei dem die Ergebnisse ohne Neuladen der Webseite abgerufen werden können.

Bis jetzt, mögen Sie PHP und AJAX?

Ja:
Nein:

Dieser Beispiel umfasst vier Elemente:

  • HTML-Formular
  • JavaScript
  • PHP-Seite
  • Textdatei zur Speicherung der Ergebnisse

HTML-Formular

Dies ist eine HTML-Seite. Sie enthält einen einfachen HTML-Formular und eine Verbindung zu einer JavaScript-Datei:

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

Beispielklärung - HTML-Formular

Wie Sie sehen können, enthält die obige HTML-Seite ein einfaches HTML-Formular, das von einem <div>-Element mit zwei Auswahlkästchen begleitet wird.

So funktioniert das Formular:

  • Wenn der Benutzer "ja" oder "nein" wählt, wird ein Ereignis ausgelöst
  • Wenn ein Ereignis ausgelöst wird, wird die getVote()-Funktion ausgeführt
  • Der umgebende Formular ist ein <div> mit dem Namen "poll". Wenn Daten von der getVote()-Funktion zurückgegeben werden, werden die Daten den Formular ersetzt.

Textdatei

Die Textdatei (poll_result.txt) speichert Daten aus dem Abstimmungsprogramm.

Es ähnelt etwa dem:

0||0

Die erste Zahl stellt die "Ja"-Abstimmung dar, die zweite Zahl die "Nein"-Abstimmung.

Anmerkung:Denken Sie daran, dass nur Ihr Webserver die Textdatei bearbeiten darf. Lassen Sie niemanden auf den Zugriff zugreifen, außer dem Webserver (PHP).

JavaScript

JavaScript-Code wird im "poll.js" gespeichert und mit dem HTML-Dokument verknüpft:

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
}

Beispielklärung:

Die Funktionen stateChanged() und GetXmlHttpObject() sind mit PHP und AJAX-Anfragen Das Beispiel in diesem Abschnitt ist gleich

getVote() Funktion

Diese Funktion wird ausgeführt, wenn der Benutzer "ja" oder "nein" im HTML-Formular auswählt

  1. Definieren Sie die URL (Dateiname), die an den Server gesendet wird
  2. Fügen Sie Parameter (vote) zur URL hinzu, die den Inhalt des Eingabefelds enthält
  3. Fügen Sie eine Zufallszahl hinzu, um zu verhindern, dass der Server Cachedateien verwendet
  4. Rufen Sie die Funktion GetXmlHttpObject() auf, um das XMLHTTP-Objekt zu erstellen und dem Objekt mitteilen, dass die Funktion stateChanged() bei einem Änderungsevent aufgerufen wird
  5. Öffnen Sie das XMLHTTP-Objekt mit der angegebenen URL
  6. Senden Sie eine HTTP-Anfrage an den Server

PHP-Seite

Die von JavaScript aufgerufene Serverseite ist eine einfache PHP-Datei mit dem Namen "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;
 }
//Wähler in die txt-Datei einfügen
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Ergebnis:</h2>
<table>
<tr>
<td>Ja:</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>Nein:</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>

Beispielklärung:

Der ausgewählte Wert wird von JavaScript übermittelt und es erfolgt dann:

  1. Inhalt der Datei "poll_result.txt" abrufen
  2. Inhalt der Datei in eine Variable einfügen und dem ausgewählten Variable 1 hinzufügen
  3. Ergebnisse in die Datei "poll_result.txt" schreiben
  4. Grafische Abstimmungsergebnisse ausgeben