Все для создания и продвижения сайтов

Верстка, программирование, SEO

Создание скрипта голосования для сайта на Ajax

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

Структура:

  1. index.html - Наша html-разметка блока с голосованием
  2. style.css - стили, для внешнего вида и фиксированного позиционирования
  3. script.js - наша js скрипты и ajax запрос
  4. 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 - для красивого эффекта появления и изчезновения нашей формы.

Скачать 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.

Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.