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.
Vous aimez PHP et AJAX ?
Explication des exemples - Page HTML
Lorsque l'utilisateur sélectionne l'une des options ci-dessus, Exécutez la fonction nommée "getVote()". Cette fonction est déclenchée par l'événement "onclick".
poll.html Le code du fichier est le suivant :
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script>
function getVote(int) {
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 执行代码
xmlhttp=new XMLHttpRequest();
} else {
// IE6, IE5 执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll_vote.php?vote="+int,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="poll">
<h3>你喜欢 PHP 和 AJAX 吗?</h3>
<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 fonction getVote() effectuera les étapes suivantes :
Crée un objet XMLHttpRequest
Crée une fonction qui s'exécute lorsque la réponse du serveur est prête
Rapports vers un fichier sur le serveur Envoyer la demande
Veuillez noter le paramètre (q) ajouté à la fin de l'URL (contient le contenu de la liste déroulante)
Fichier PHP
La page du serveur appelée ci-dessus via JavaScript est un fichier PHP nommé "poll_vote.php":
<?php
$vote = htmlspecialchars($_REQUEST['vote']);
// 获取文件中存储的数据
$filename = "poll_result.txt";
$content = file($filename);
// 将数据分割到数组中
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0)
{
$yes = $yes + 1;
}
if ($vote == 1)
{
$no = $no + 1;
}
// 插入投票数据
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>结果:</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 de JavaScript vers le fichier PHP, que se passe-t-il :
Obtenir le contenu du "poll_result. txt"
Mettez le contenu du fichier dans la variable et ajoutez 1 à la variable sélectionnée
Écrivez le résultat dans le fichier "poll_result.txt " fichier
Sortir le graphique Les données du programme de vote sont stockées dans le fichier texte (
poll_result.txt ).
Les données qu'il stocke sont les suivantes :
3||4
Le premier chiffre représente le nombre de votes pour "Oui", le deuxième Les nombres représentent le nombre de votes « non ».Tutoriels vidéo associés recommandés : "Tutoriel AJAX" http://www.php.cn/course/list/25.html
