Генератор форм

Для веб-мастера

Реклама


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

Рейтинг:
Дата: 1 июня 2010 Просмотры 8971

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

Оцените эту статью:
Похожие статьи
Интересно почитать

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

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

Реклама

Топ комментаторы

  • Lonadels (2)
  • Бодрый (1)

Нашли ошибку в тексте

Система Orphus
https://biznesguide.ru/coding/105.html
3,86 из 5 на основе 25 оценок.
Твиттер Facebook Google plus RSS