Maison > Article > développement back-end > Démo sur le vote AJAX

Démo sur le vote AJAX

jackloveoriginal: 2018-05-07 15:12:371480parcourir

Démontrez un programme de vote à travers lequel les résultats du vote sont affichés sans actualiser la page Web. Cet article démontrera l'effet du vote.

Explication des exemples - Page HTML

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".

Le code du fichier poll.html est le suivant :

<html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</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éer un objet XMLHttpRequest

Créer dans la réponse du serveur Fonction exécutée lorsqu'elle est prête

Envoie une requête au fichier sur le serveur

Veuillez noter le paramètre (q) ajouté à la fin de l'URL (contenant le contenu du liste déroulante)

Fichier PHP

La page du serveur appelée par JavaScript ci-dessus est un fichier PHP nommé "poll_vote.php" :

<?php
$vote = htmlspecialchars($_REQUEST[&#39;vote&#39;]);// 获取文件中存储的数据$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>

Quand Lorsque la valeur sélectionnée est envoyée depuis JavaScript vers le fichier PHP, que se passera-t-il :

Récupérer le contenu du fichier "poll_result.txt"

Mettre le fichier contenu dans une variable et ajoutez 1 à la variable sélectionnée

Écrivez les résultats dans le fichier "poll_result.txt"

Sortez les résultats du vote graphique

Fichier texte

Stocker dans le fichier texte (poll_result.txt) les données du processus de vote.

Les données qu'il stocke sont les suivantes :

3||4

Le premier chiffre représente le nombre de votes pour "Oui", et le deuxième chiffre représente le nombre de votes « 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).

Cet article démontre l'effet du vote. Pour plus de matériel d'apprentissage, veuillez suivre le site Web php chinois pour le consulter.

Recommandations associées :

Points de connaissances connexes sur le lecteur RSS AJAX

Exemple PHP - Connaissances liées à la recherche en temps réel AJAX

À propos de l'exemple PHP - Interaction AJAX avec XML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Points de connaissances connexes sur le lecteur RSS AJAXArticle suivant：Points de connaissances connexes sur le lecteur RSS AJAX

Articles Liés

Voir plus