Создание скрипта голосования для сайта на Ajax
Сегодня рассмотрим скрипт голосования на сайте, используя Ajax для записи результатов в базу данных через обработчик.
Структура:
- index.html - Наша html-разметка блока с голосованием
- style.css - стили, для внешнего вида и фиксированного позиционирования
- script.js - наша js скрипты и ajax запрос
- obrab.php - обработчик, получает результат голосование и записывает его в базу данных
Разметка HTML и стили
Здесь мы просто создаём нашу форму и подключаем нужные нам скрипты
<html> <head> <title>Голосование на ajax<title> <meta charset="utf-8"/> <link href="style.css" rel="stylesheet"/> </head> <body><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> <script src="jquery.easing.1.3.js"> <script src="script.js"> </body> </html>
Закрыть форму
Создали общию разметку, подключили стили и библиотеки jquery и jquery.easing - для красивого эффекта появления и изчезновения нашей формы.
Стили:
#widjetmain{ background-color: #fff; width: 500px; height: 400px; position: fixed; top: -450px; left: 50%; margin-left: -250px; border-radius: 0 0 10px 10px; box-shadow: 0px 0px 6px 0px #806F6F; z-index: 999; } #widjetmainhead{ font-size: 32px; color: #525A5B; text-align: center; padding: 10px 0; background: linear-gradient(to top, #F1F3E8, #F2F9F8); font-family: Georgia; } #widjetmainimg{ margin-top: 10px; } #widjetmainimg img{ display: block; float:left; margin-left: 32px; width: 120px; } #widjetmainimg{ margin-top: 10px; } #wclose{ margin-left: 30px; cursor: pointer; }
В стилях ничего сложного, главное прошу заметить, что изначально формы голосования не будет видно (т.к. поднято на -450px вверх), в дальнейшем мы через jquery будем опускать её.
Script.js - js скрипты и ajax запрос
$(document).ready(function(){ // Функция для получения кук function get_cookie(cookie_name){ var results = document.cookie.match ('(^|;) ?' + cookie_name + '=([^;]*)(;|$)'); if (results) return (unescape(results[2])); else return null; } // Получаем наши куки голосания x = get_cookie("Golos"); // Если куки не существует, то пояляется форма if (x != "Yes"){ setTimeout(function () { $('#widjetmain').stop().animate({ top: "0px" },'slow','easeOutQuint'); }, 1000); } }); //ready end // Закрытие формы, при клике на "Закрыть" $('#wclose').click(function(){ $('#widjetmain').stop().animate({ top: "-500px" },'slow','easeOutQuint'); document.cookie = "Golos=Yes; expires=01/05/2015 00:00:00"; }); // При нажатии на проголосовать (ajax, закрытие, запись куки) $('#widbtn').click(function(){ $('#widbtn').remove(); checked = $("input:radio:checked").val(); $.ajax({ type: 'POST', url: 'obr.php', data: ({ 'radio': checked }), success: function(){ document.cookie = "Golos=Yes; expires=01/05/2015 00:00:00"; } }); $('#widgetsps').html('Спасибо за ваш голос'); setTimeout(function () { $('#widjetmain').stop().animate({ top: "-300px" },'slow','easeOutQuint'); }, 1000); });
Функционал такой: Пользователь заходит на сайт, выскакивает форма, он голосует, затем выполняется ajax-запрос, записывается кука и форма пропадает.
Куки используются для того, чтобы пользователям каждый раз не появлялась форма, то есть форма появляется для тех, у кого нет кук, потом они голосуют, кука записывается. И в следующий раз, когда пользователи зайдут на сайт или перейдут на другую страницу, они не увидят форму.
Описание: (по строчкам)
- 4 - функция для получения кук, для дальнейшей проверки
- 12 - получаем куку и записываем её в переменную
- 15 - здесь идёт проверка, если кука не существует, то появляется форма, если нет - форма не появится
- 25 - при клике на кнопку закрыть, форма изчезает и записывается cookie (для того, чтобы больше не появлялось голосование)
- 33 - выполняется скрипт при кнопке "отправить".
- 34 - удаляем кнопку
- 35 - получаем значение из голосования при выборе, у <input>, значение value (1, 2 или 3) и записываем в переменную
- 42 - при успешном ajax-запросе записываем cookie.
- 46 - вставляем текст вместо кнопки.
- 47 - через 1 секунду после нажатия, появляется текст и форма изчезает
Обработчик формы obrab.php и база данных
В обработчике мы получаем результаты голосования и записываем результат в базу данных.
<?php $host = "localhost"; // хост $user = "root"; // логин $password = ""; // пароль $db_name = "mybase"; // имя базы данных if (isset($_POST["radio"]) && !empty($_POST["radio"])) { $val = $_POST["radio"]; $my = mysql_connect($host, $user, $password); $db_select= mysql_select_db($db_name,$my); $sql="INSERT INTO `table` (`value`) VALUES ('$val');"; $res = mysql_query($sql); mysql_close($my); } ?>
Первые четыре переменные служат для подключения к базе данных. Потом идёт проверка на POST, записываем результат в переменную val, подключаемся к базе и выполняем запрос по одному полю (с результатом) и закрываем соединение.
Необходимо также создать базу данных, структура простая:
- id - идендификатор голосования, ставим "AUTO_INCREMENT"
- value - результат голосования (1,2,3)
- date - текущая дата в формате TIMESTHAMP
Вот так и создаётся самая простая форма для голосования на ajax.
Комментарии