recherche

Maison >développement back-end >tutoriel php >PHP combiné avec Ajax pour implémenter la fonction de vote

PHP combiné avec Ajax pour implémenter la fonction de vote

墨辰丷
墨辰丷original
2018-06-07 10:53:341273parcourir

Cet article présente principalement php combiné avec Ajax pour implémenter la fonction de vote. Les amis intéressés peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Dans cet exemple AJAX, nous démontrerons un programme de vote, et les résultats peuvent être obtenus sans recharger la page Web.

Cet exemple comprend quatre éléments :

① Formulaire HTML
② JavaScript
③ Page PHP
④ Fichier texte pour stocker les résultats

1. Formulaire HTML

Ceci est une page HTML. Elle contient un simple formulaire HTML, et une connexion à un fichier JavaScript : 

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<p id="poll">
<h2>Do you like PHP and AJAX so far?</h2>
<form>
Yes: 
<input type="radio" name="vote" 
value="0" onclick="getVote(this.value)">
<br />
No: 
<input type="radio" name="vote" 
value="1" onclick="getVote(this.value)">
</form>
</p>
</body>
</html>

Exemple d'explication - Formulaire HTML

Comme vous pouvez le voir, la page HTML ci-dessus contient un simple formulaire HTML avec un élément e388a4556c0f65e1904146cc1a846bee avec deux boutons radio.

Le formulaire fonctionne comme ceci :

1. Lorsque l'utilisateur sélectionne "oui" ou "non", un événement sera déclenché
2. () est exécutée
3. Autour du formulaire se trouve un e388a4556c0f65e1904146cc1a846bee Lorsque les données sont renvoyées par la fonction getVote(), les données renvoyées remplacent le formulaire.

2. Fichier texte

Le fichier texte (poll_result.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).

3. JavaScript

Le code JavaScript est stocké dans "poll.js" et connecté au document HTML : 

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
}

Exemple d'explication :

Les fonctions stateChanged() et GetXmlHttpObject sont les mêmes que les exemples de la section Requêtes PHP et AJAX.

Fonction getVote()

Cette fonction est exécutée lorsque l'utilisateur sélectionne "oui" ou "non" dans le formulaire HTML.

1. Définissez l'url (nom du fichier) envoyée au serveur
2. Ajoutez des paramètres (vote) à l'url avec le contenu du champ de saisie
3. Ajoutez un nombre aléatoire à Prevent. le serveur d'utiliser les fichiers en cache
4. Appelez la fonction GetXmlHttpObject pour créer un objet XMLHTTP et dites à l'objet d'exécuter la fonction stateChanged lorsqu'un changement est déclenché
5 Ouvrez l'objet XMLHTTP avec l'url donnée
. 6. Envoyer une requête HTTP au serveur

4. Page PHP

La page du serveur appelée par le code JavaScript est un simple fichier PHP nommé "poll_vote.php". 

<?php
$vote = $_REQUEST[&#39;vote&#39;];
//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;
}
//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="poll.gif"
width=&#39;<?php echo(100*round($yes/($no+$yes),2)); ?>&#39;
height=&#39;20&#39;>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif" 
width=&#39;<?php echo(100*round($no/($no+$yes),2)); ?>&#39;
height=&#39;20&#39;>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>

Exemple d'explication :

La valeur sélectionnée est transmise depuis JavaScript, puis ce qui se passe :

1. Obtenez "poll_result.txt. " Contenu du fichier
2. Mettez le contenu du fichier dans une variable et ajoutez 1 à la variable sélectionnée
3. Écrivez le résultat dans le fichier "poll_result.txt"
4. Sortez le graphique résultats du vote

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Recommandations associées :

Implémentation PHP de la fonction d'enregistrement (cas)

Comment obtenir le Page d'article du compte public WeChat

Comment obtenir l'historique des messages des comptes publics WeChat

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：Comment parcourir un arbre binaire en phpArticle suivant：Comment parcourir un arbre binaire en php

Articles Liés

Voir plus