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

Продолжаю тему создания «AJAX-формы голосования для статей», о которой я начал рассказывать в прошлой статье здесь!

Итак, в прошлой статье мы создали форму голосования, а также определились со структурой базы данных, для хранения оценок. Также мы создали первый AJAX-запрос  на сервер, который выводил на страницу текущие оценки.

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

Для этого на кнопку "Оценить" с id = "add"  вешаем обработчик click(), который при клике на нее будет запускать AJAX-запрос. Итак, выглядеть это все будет так:

$('#add').click(function()  { 

  
  var vote =  $('input[name=vote]:checked').val();

  var id_post =  $('input[name=id_post]').val();                           

  
  $.ajax({

  type:  "POST",

  url: "vote.php",

  data:{id_post:id_post, vote:vote},

  beforeSend: function(){

  $('#status').html("<img  src='img/loading.gif' width='16' height='16'>
   <br /><p>Ваш запрос обрабатывается...</p>");

  },

  success: function(responseText){

  var data = eval('(' + responseText  + ')');

  if (data.status == 'OK'){

  $('#status').html("Ваш голос учтен!");

  $('#vote_result').html(data.vote);

  $('#voters_result').html(data.voters);

  }

  else{

  $('#status').html("Ошибка!");

  $('#error').html(data.error);

  }
  

  }

  
  });           

  
  })

Ничего нового в этом AJAX-запросе нет. Все как и в прошлой статье.

При клике на кнопку “Оценить” получаем значения оценки, которую поставил пользователь (radio button) и id статьи, для которой идет голосование.

var vote = $('input[name=vote]:checked').val();

var id_post =  $('input[name=id_post]').val();

Дальше методом POST передаем эти данные на сервер файлу vote.php, который будет выполнять подсчет и вывод результатов голосования.

Перед отправкой данных на сервер выводим изображение загрузки данных и надпись «Ваш запрос обрабатывается».

$('#status').html("<img src='img/loading.gif' width='16' height='16'>
<br /><p>Ваш запрос обрабатывается...</p>");

Это необходимо делать для того, чтобы пользователь видел, что идет загрузка данных, а не подумал что страничка зависла и не ушел с Вашего сайта!

После того как данные от сервера получены их необходимо преобразовать в удобный для jQuery вид, так как с сервера данные возвращаются в json формате (json_encode). Для этих целей используется функция eval(), которая преобразует эти данные.

var data = eval('(' + responseText +  ')');

Если сервер вернул успешные данные(status==OK), обновляем результаты голосования и выводим текст «Ваш голос  учтен!», иначе выводим текст ошибки!

Все довольно таки просто!

Теперь переходим к серверной части скрипта! В прошлой статье мы с Вами создали файл vote.php, который выводил текущие оценки за статью (оценку и количество голосов).  Сегодня мы перепишем этот файл и создадим специальный класс, который будет выполнять все выше сказанные операции. Итак приступим.
Я не буду останавливаться на всех моментах создания классов, так как сейчас статья не об этом, а сразу приведу Вам готовый код этого файла, а потом подробно расскажу Вам что там и к чему! ОК?

<?php

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

     
$rating =  new vote($_POST['id_post'],$_POST['vote']);

isset($_POST['fetch'])  ? $rating->get_ratings() : $rating->vote();
      
class vote  { 

 private $id_post;
 private $vote;

  
function __construct($pid,$vcl) {
  $this->vote = $vcl;

  $this->id_post = $pid;        

}

  

public function get_ratings() {

 $result=mysql_query("SELECT * FROM  vote 
         WHERE id_post='".(int)$this->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;

  }

   echo json_encode($res);

}

  

public function vote() {

  if(!empty($this->id_post) and  !empty($this->vote)){

  $result=mysql_query("SELECT *  FROM vote 
          WHERE id_post='".(int)$this->id_post."'");

  $res['status'] = "OK";

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

     $myrow =  mysql_fetch_assoc($result);
     $vote_res =  round(($myrow['vote'] + $this->vote)/2,1);
     $voters = ++$myrow['voters'];
     $res['vote'] = $vote_res;
     $res['voters'] = $voters;

     mysql_query("UPDATE vote  SET 
     vote='".$vote_res."', voters='".$voters."' 
     WHERE  id_post='".(int)$this->id_post."'");

  }
  else{
     mysql_query("INSERT INTO  vote (id_post,vote,voters) 
     VALUES  ('".$this->id_post."','".$this->vote."','1')");
     
     $res['vote'] = $this->vote;
     $res['voters'] = 1;

 }

}
else{

   $res['status'] = "ERR";
   $res['error'] = 'Вы не правильно передали параметры запроса!';

 }

 echo  json_encode($res);

}
      
}

?>

Данный класс vote() имеет всего 2 метода - get_ratings() и vote().

Первый из них  get_ratings() предназначен лишь для того, чтобы выводить текущие результаты для заданной статьи, а второй vote() – для обработки полученных данных (голосов и оценок голосования) !

Если Вы заметили метод  get_ratings() содержит код, который мы создали с Вами в прошлой статье, поэтому на нем я останавливаться больше не буду!

Метод vote() проверяет поступили ли данные (оценка и id). Если все в порядке то делаем запрос к базе данных,  в которой хранятся результаты голосования и вытаскиваем от туда оценку за статью указанным id.

Если в базе данных нет еще записи с id-заметки, то добавляем  в нее данные о голосовании, если же есть, то происходит перерасчет и обновление данных!

Посмотреть как это работает в действии можно перейдя по этой ссылке!

Скачать исходники можно здесь!

Если Вам необходимо создавать более сложные AJAX-формы, то рекомендую посмотреть скрипт «Мастер создания форм», который за считанные секунды сгенерирует необходимую для Вас AJAX-форму!