Опрос с PHP и AJAX

Голосование AJAX

В этом примере AJAX мы покажем вам программу для голосования, которая позволяет получить результаты без перезагрузки страницы.

До сих пор, вам нравится PHP и AJAX?

Да:
Нет:

Этот пример включает в себя четыре элемента:

  • Форма HTML
  • JavaScript
  • Страница PHP
  • Текстовый файл для хранения результатов

Форма HTML

Это страница HTML. Она содержит простую форму HTML и ссылку на файл JavaScript:

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>Нравится ли вам PHP и AJAX пока?</h2>
<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>

Пример объяснения - форма HTML

Как вы видите,上面的 HTML страница содержит простую форму HTML, в которой элемент <div> имеет два радиокнопки.

Так работает форма:

  • Когда пользователь выбирает "да" или "нет", срабатывает событие
  • Когда событие срабатывает, выполняется функция getVote()
  • Об围绕着 этой формы есть <div> с именем "poll". Когда данные возвращаются из функции getVote(), возвращаемые данные заменяют форму.

Текстовый файл

Текстовый файл (poll_result.txt) хранит данные от программы голосования.

Это будет выглядеть примерно так:

0||0

Первый номер означает голос "Да", а второй номер означает голос "Нет".

Комментарии:Помните, разрешите только вашему веб-серверу редактировать этот текстовый файл. Не позволяйте другим пользователям получить доступ, кроме веб-сервера (PHP).

JavaScript

JavaScript код хранится в "poll.js" и подключается к 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
}

Пример объяснение:

Функции stateChanged() и GetXmlHttpObject с Запросы AJAX с PHP Примеры в этом разделе аналогичны.

Функция getVote()

Эта функция выполняется, когда пользователь выбирает "да" или "нет" в HTML-форме.

  1. Определение url (имени файла), отправляемого на сервер
  2. Добавление параметра (vote) к url, содержащего содержимое поля ввода
  3. Добавление случайного числа, чтобы предотвратить использование сервером кэшированных файлов
  4. Вызов функции GetXmlHttpObject для создания объекта XMLHTTP и указания выполнения функции stateChanged при возникновении изменений
  5. Открываем объект XMLHTTP с помощью предоставленного url
  6. Отправка HTTP-запроса на сервер

Страница PHP

Страница сервера, вызываемая кодом JavaScript, это простая страница PHP с именем "poll_vote.php".

<?php
$vote = $_REQUEST['vote'];
//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>Результат:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif" 
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>

Пример объяснение:

Выбранное значение传来 из JavaScript, затем происходит:

  1. Получение содержимого файла "poll_result.txt"
  2. Вставка содержимого файла в переменную и увеличение выбранных переменных на 1
  3. Запись результатов в файл "poll_result.txt"
  4. Вывод графического результата голосования