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中文网(php.cn)</title>
<script>
function getVote(int) {
  //创建 XMLHttpRequest 对象
  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","2.php?vote="+int,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<div id="poll">
<h3>你喜欢 PHP 和 AJAX 吗?</h3>
<!-- 用户选择一个选项，触发onclick事件，执行getVote()函数 -->
<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
//过滤浏览器传过来的数据
$vote = htmlspecialchars($_REQUEST['vote']);

// 获取文件中存储的数据
$filename = "3.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);//将$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 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

Formation continue

nouveau fichier

<html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script> function getVote(int) { //创建 XMLHttpRequest 对象 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","2.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>

soumettre Réinitialiser le code

Opération automatique