Tutoriel de base sur le développement PHP Vote AJAX
Vote AJAX
Dans l'exemple suivant, nous allons démontrer un programme de vote à travers lequel les résultats du vote sont affichés sans actualiser la page Web.
L'affichage de la page est affiché à droite
Lorsque l'utilisateur sélectionne l'une des options ci-dessus, une fonction nommée "getVote()" sera exécutée. Cette fonction est déclenchée par l'événement "onclick".
Cet exemple comprend trois parties
Formulaire HTML
Fichier PHP
Fichier TXT
Fichier HTML?:
Voir 1.php pour code source
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script>
function getVote(int) {
//創(chuàng)建 XMLHttpRequest 對(duì)象
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 執(zhí)行代碼
xmlhttp=new XMLHttpRequest();
} else {
// IE6, IE5 執(zhí)行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//創(chuàng)建在服務(wù)器響應(yīng)就緒時(shí)執(zhí)行的函數(shù)
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
//向服務(wù)器上的文件發(fā)送請(qǐng)求
xmlhttp.open("GET","2.php?vote="+int,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="poll">
<h3>你喜歡 PHP 和 AJAX 嗎?</h3>
<!-- 用戶選擇一個(gè)選項(xiàng)，觸發(fā)onclick事件，執(zhí)行g(shù)etVote()函數(shù) -->
<form>
是:
<input type="radio" name="vote" value="0" onclick="getVote(this.value)">
<br>否:
<input type="radio" name="vote" value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>La page HTML ci-dessus contient un formulaire HTML simple avec deux boutons radio dans un élément <div>
Le formulaire fonctionne comme ceci?:
Lorsque l'utilisateur sélectionne "oui" ou "non", un événement est déclenché
Lorsque l'événement est déclenché, la fonction getVote() est exécutée
Autour du formulaire se trouve un <div> nommé "poll". Lorsque les données sont renvoyées par la fonction getVote(), les données renvoyées remplacent le formulaire. La fonction
getVote() effectuera les étapes suivantes?:
Créer un objet XMLHttpRequest
Créé in Fonction exécutée lorsque la réponse du serveur est prête
Envoyer une requête au fichier sur le serveur
Veuillez noter le paramètre (q) ajouté à la fin de l'URL (Contient le contenu de la liste déroulante)
Fichier PHP :
Le serveur appelé par JavaScript dans le paragraphe ci-dessus La page est un fichier PHP nommé "2.php" :
<?php
//過(guò)濾瀏覽器傳過(guò)來(lái)的數(shù)據(jù)
$vote = htmlspecialchars($_REQUEST['vote']);
// 獲取文件中存儲(chǔ)的數(shù)據(jù)
$filename = "3.txt";
$content = file($filename);
// 將數(shù)據(jù)分割到數(shù)組中
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0)
{
$yes = $yes + 1;
}
if ($vote == 1)
{
$no = $no + 1;
}
// 插入投票數(shù)據(jù)
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");//寫入方式打開
fputs($fp,$insertvote);//將$insertvote寫入文件中
fclose($fp);//關(guān)閉打開文件
?>
<h2>結(jié)果:</h2>
<table>
<tr>
<td>是:</td>
<td>
<span style="display: inline-block; background-color:green;
width:<?php echo(100*round($yes/($no+$yes),2)); ?>px;
height:20px;" ></span>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>否:</td>
<td>
<span style="display: inline-block; background-color:red;
width:<?php echo(100*round($no/($no+$yes),2)); ?>px;
height:20px;"></span>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>Lorsque la valeur sélectionnée est envoyée depuis JavaScript vers le fichier PHP, que se passe-t-il?:
Récupérer" poll_result.txt" Le contenu du fichier
Mettez le contenu du fichier dans la variable et ajoutez 1 à la variable sélectionnée
écrire le résultat dans le fichier ? poll_result.txt ?
Afficher les résultats du vote sous forme graphique
Fichier TXT
Le fichier texte (3.txt) stocke les données du programme de vote.
Cela ressemble à ceci?:
0||0
Le premier chiffre représente un vote ? Oui ?, et le deuxième chiffre représente un vote ? Non ?.
Remarque?: N'oubliez pas d'autoriser uniquement votre serveur Web à modifier ce fichier texte. Ne laissez personne d'autre y accéder, à l'exception du serveur Web (PHP).
Expérience d'apprentissage
Cet exemple comprend principalement les points de connaissance suivants?:
Bases du formulaire?: bouton radio
événement onclick?: se produit lorsque l'on clique sur l'objet
Appel de fonction, passage de valeur de fonction
Création d'un objet AJAX XMLHttpRequest, fonctions exécutées lorsque le serveur répond, et envoi de requêtes aux fichiers sur le serveur : Voir 1-5 pour l'expérience d'apprentissage
Méthode HTML DOM getElementById()?: renvoie une référence au premier objet avec l'ID spécifié
lié ??à PHP opérations sur les fichiers?:
file()?: lire le fichier entier dans un tableau
fopen()?: ouvrir le fichier ou l'URL
fputs()?: écrire dans un fichier
fclose()?: fermer un fichier ouvert
fonctions?:
htmlspecialchars()?: Convertir les caractères prédéfinis en entités HTML
exploser()?: Rompre la cha?ne Pour le tableau
