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

Рейтинг:

Дата: 1 июня 2010 10354

Твитнуть

Продолжаю тему создания «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-форму!

• Комментарии (0)
• Сайт
• Facebook

Представьтесь:

Ваш e-mail:

Адрес сайта
(если есть):

Сообщение:

 

Введите цифры:

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?