Создание AJAX-голосовалки для статей. Начало.

В сегодняшней статье я расскажу Вам, как создать форму голосования для статей! Это будет AJAX-форма голосования и выглядеть она будет также как на моем сайте!

Сразу хочу Вас предупредить, что это будет самая обыкновенная форма голосования, которая не будет делать проверку от повторного голосования. Я лишь хочу показать Вам всю прелесть использования AJAX-технологии!

Итак, первым делом давайте определимся со структурой базы данных. Можно конечно использовать уже существующую таблицу в Вашей базе данных, в которой хранятся все Ваши заметки, но я в этом примере создам новую таблицу, которая будет содержать 4 поля.

Это такие поля:

id – id –автоинкремент;
id_post – id заметки;
vote – оценка за статью;
voters – количество проголосовавших.

Для того чтобы создать такую таблицу необходимо выполнить следующий SQL-запрос:

  CREATE  TABLE `vote` (

  `id` int(11) NOT NULL auto_increment,

  `id_post` int(11) NOT NULL,

  `vote` float NOT NULL,

  `voters` int(11) NOT NULL,

  PRIMARY KEY   (`id`)

  )  ENGINE=MyISAM DEFAULT CHARSET=cp1251;

Итак, с базой данных мы разобрались. Теперь переходим к созданию самой формы. Она будет иметь следующий html-код:

<table align="center" class="tb">
<tr>
<td colspan="4" class="vote_title">Оцените эту статью:</td>
</tr>

<tr>
<td width="9%"><input name='vote' type='radio' value='1' /></td>
<td width="21%">Ужасно</td>
<td width="29%"><img src="img/rate_star.gif" alt="" /><img src="img/rate_star_empty.gif" alt="" /><img src="img/rate_star_empty.gif" alt="" /><img src="img/rate_star_empty.gif" alt="" /><img src="img/rate_star_empty.gif" alt="" /></td>
</tr>

<tr>
<td><input name='vote' type='radio' value='2' /></td>
<td>Плохо</td>
<td><img src="img/rate_star.gif" alt="" /><img src="img/rate_star.gif" alt="" /><img src="img/rate_star_empty.gif" alt="" /><img src="img/rate_star_empty.gif" alt="" /><img src="img/rate_star_empty.gif" alt="" /></td>
</tr>

<tr>
<td><input name='vote' type='radio' value='4' /></td>
<td>Хорошо</td>
<td><img src="img/rate_star.gif" alt="" /><img src="img/rate_star.gif" alt="" /><img src="img/rate_star.gif" alt="" /><img src="img/rate_star.gif" alt="" /><img src="img/rate_star_empty.gif" alt="" /></td>
</tr>

<tr>
<td><input name='vote' type='radio' value='5' /></td>
<td>Отлично</td>
<td><img src="img/rate_star.gif" alt="" /><img src="img/rate_star.gif" alt="" /><img src="img/rate_star.gif" alt="" /><img src="img/rate_star.gif" alt="" /><img src="img/rate_star.gif" alt="" /></td>
<td width="41%">
<div align="right">
<input name="id_post" type="hidden" value="1" />
<input name='submit' type='button' id="add" value='Оценить' />
</div>
</td>
</tr>

<tr>
<td colspan="4">Голосов: <span id="voters_result"></span> Оценка: <span id="vote_result"></span></td>
</tr>

</table>
</form>

Хочу обратить Ваше внимание на следующую строку:

<input name="id_post" type="hidden" value="1" />

В это поле необходимо подставлять id-заметки, для которой идет голосование!

Для того, чтобы информировать пользователя о результатах голосования и об возможных ошибках в код было добавлено три следующих слоя:

<div  class="status">
<div  id="status"></div>
<div  id="error"></div>
</div>

Именно в эти блоки мы будем выводить все сообщения!

Так, с html-кодом вроде бы все понятно! Теперь переходим к самому интересному: "Созданию AJAX-запроса на сервер для подсчета голосов"

Для этого я буду использовать библиотеку jQuery, о которой я уже писал здесь и здесь!

Для того чтобы подключить библиотеку необходимо между тегами <head></head> вставить следующую строку:

<script  type="text/javascript"  src="js/jquery.js"></script>

Это означает, что у Вас на сервере есть папку js, в которой и расположена сама библиотека jQuery.

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

Для того чтобы это осуществить необходимо между тегами <head></head> прописать следующий код:

<script type="text/javascript">
$(function () {
    
// AJAX запрос получения результатов голосования
$.ajax({
type: "POST",
url: "vote2.php",
data:{id_post:$('input[name=id_post]').val(),fetch:1},
beforeSend: function(){
$('#vote_result').html("<img src='img/loading.gif' width='16'
                         height='16'></p>");
$('#voters_result').html("<img src='img/loading.gif' width='16'
                          height='16'></p>");
},
success: function(responseText){
var data = eval('(' + responseText + ')');
if (data.status == 'OK'){
   $('#vote_result').html(data.vote);
   $('#voters_result').html(data.voters);
            
}     	
}
      		 
});

});
</script>

Не пугайтесь сразу. Здесь нет ничего сложного. Просто необходимо со всем разобраться. Первым делом я приведу Вам список всех свойств метода $.ajax(options), который загружает страницу используя HTTP запрос.

async – по умолчанию все запросы выполняются в асинхронном режиме (значение true). Если необходимо выполнить синхронный запрос, следует установить значение false для этой опции. Помните, что синхронный запрос может временно заблокировать браузер, запретив любые действия во время выполнения запроса.

beforeSend – может содержать функцию, которая должна быть вызвана до передачи запроса. beforeSend – это Ajax Event (события рассмотрены в другой статье).

cache – опция добавлена в jQuery 1.2. По умолчанию – true. Если установить в false, запрашиваемая страница не будет кэшироваться браузером.

complete – определяет функцию, которая будет вызвана по окончанию запроса (успешного и ошибочного выполнения). Принимает два аргумента: объект XMLHttpRequest и строку, описывающую «успешность» запроса. complete – это Ajax Event (события рассмотрены в другой статье).

contentType – при передаче данных серверу сообщает content-type. По умолчанию – application/x-www-form-urlencoded.

data – данные, передаваемые на сервер. Могут быть объектом или строкой. Конвертируются в строку запроса, если уже не представляют собой строку. Добавляются в URL GET-запроса. Если используется объект, он должен представлять собой пары ключ/значение. Если значения представлены в виде массива, jQuery сериализует значения с некоторым ключом. Например: {foo:["bar1", "bar2"]} будет представлено как «&foo=bar1&foo=bar2?.

dataType – строка, описывает тип данных, которые ожидаются в качестве ответа сервера. Если не определена, то jQuery сам попытается определить тип, основываясь на MIME-типе ответа сервера. Доступные типы:
- xml: вернет XML документ, который может быть обработан через jQuery.
- html: вернет HTML как plain text.
- script: расценивает ответ как JavaScript и возвращает его как plain text.
- json: расценивает ответ как данные в формате JSON и возвращает JavaScript объект.
- jsonp: загружает данные в формате JSON используя JSONP. Необходимо дополнительно добавить «?callback=?» в конец строки запроса в URL, чтобы определить вызов. (Добавлено в jQuery 1.2).
- text: строка plain text.

error – определяет функцию, которая будет вызвана в случае неуспешного выполнения запроса.

global – true или false. Вызывать или нет глобальные обработчики событий Ajax для этого запроса. Может быть использована для контроля различных Ajax событий. По умолчанию – true.

ifModified – запрос будет успешным только в случае, если данные ответа изменились со времени последнего запроса. По умолчанию – false.

processData – по умолчанию true. В опции data данные представлены в виде объекта, который преобразуется в строку запроса, подходящую для content-type по умолчанию – «application/x-www-form-urlencoded». Если необходимо иное, установите опцию processData в false.

success – указывается функция, которая будет вызвана в случае успешного завершения запроса. Функция принимает два аргумента: данные, возвращенные с сервера и отформатированные с учетом параметра dataType и строка, описывающая статус ответа.

timeout – устанавливает локальный тайм-аут для запроса в миллисекундах. Отменяет глобальный тайм-аут для этого запроса, если тот определен через $.ajaxSetup.

type – тип запроса, POST или GET. По умолчанию установлен GET. Типы запроса PUT или DELETE тоже могут быть использованы, но они поддерживаются не всеми браузерами.

url – просто url запроса.

А теперь вернемся к нашему коду. Если Вы обратите внимание, то увидите, что мы передаем данные файлу vote.php (url: "vote.php") методом POST (type: "POST"). Перед отправкой запроса на сервер (beforeSend) у нас запускается функция, которая вставляет в поля результатов голосования ( и ) картинку загрузки. Это необходимо делать для того, чтобы информировать пользователя о том, что в данный момент выполняется загрузка и данных.

После успешного выполнения запроса выводим результаты голосования.

Так как вся информация хранится в базе данных, то первым делом создадим файл, который будет отвечать за подключение к базе данных MySQL и назовем его db.php

<?php 

$DB_host =  "localhost"; // имя сервера MySQL

$DB_user =  "root"; // имя пользователя MySQL

$DB_pass =  "pass"; // пароль на сервере MySQL
$DB_name =   "database";  // имя  базы данных 

/* Соединяемся с сервером MySQL */

$db=mysql_connect($DB_host,$DB_user,$DB_pass);

/* Выбираем  необходимую базу данных */

mysql_select_db($DB_name, $db);

/*  Устанавливаем  кодировку */

 mysql_query('SET  NAMES cp1251');

?>

Сам файл vote.php, который выполняет вывод результатов голосования из базы данных выглядит так:

<?php

require_once('db.php'); //Подключаемся к базе данных

$result=mysql_query("SELECT  * FROM vote 
        WHERE id_post='".(int)$_POST['id_post']."'");

$res['status'] = "OK";
//Если в базе  данных есть информация о текущей заметки
//извлекаем её 

if(mysql_num_rows($result) == 1){

   $myrow = mysql_fetch_assoc($result);

   $res['vote'] = $myrow['vote'];
   $res['voters'] = $myrow['voters'];
}
else{

   $res['vote'] = 0;

   $res['voters'] = 0;

}

//Выводим  полученные результаты в формате json

echo  json_encode($res);

?>

Ну вот собственно и все! Посмотреть готовый пример можно по этой ссылке! Скачать исходники можно по этой ссылке!

В следующей статье я продолжу создание этой голосовалки и доведем её до логического завершения!

Удачи!

NEW!!! Теперь нет необходимости изучать html, javascript или php, для того, чтобы создать форму обратной связи на сайт, AJAX-форму, опрос, голосование или анкету!

Создание AJAX-голосовалки для статей. Начало.