Уголок веб-разработчика

сайт для веб-мастеров и веб-разработчиков


Реклама на сайте
как разместить свою рекламу?



Читайте наш блог!



Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery
(изменения от 26.11.2013)

Автор: Михаил Пестречихин
Источник: http://www.codething.ru/guestbook2.php

В статье рассмотрено применение библиотеки jQuery и технологии AJAX для динамического обновления содержимого гостевой книги без перезагрузки страницы.

Внимание! В этой статье используется устаревшее расширение PHP для связи с MySQL!
Приемы работы с СУБД MySQL через современное расширение PHP mysqli приведены в новой статье!

В качестве материала для разбора возьмем исходный код работающей гостевой книги из нашей предыдущей статьи «Гостевая книга своими руками на PHP и MySQL»: исходный код примеров (2 Кб)

Для начала поймем, что же такое AJAX и jQuery и зачем они нужны?

AJAX - это технология, позволяющая обмениваться данными между браузером и сервером без перезагрузок страницы, что бывает весьма удобно.

jQuery – это JavaScript-библиотека, расширяющая и упрощающая разработку веб-сайтов. Помимо технологии AJAX в ней реализовано множество функций для работы с объектами (контейнерами) на веб-страницах.

Официальный сайт jQuery: http://www.jquery.com/

Подробнее о динамическом обновлении контента средствами AJAX и jQuery читайте статью
«AJAX и jQuery. Динамическое обновление контента. Основы».

Важно!
Для того, чтобы пример работал корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.

Приступим к разбору кода. Добавим в начало файла index.php строки с подключением библиотеки jQuery:

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

Далее, вынесем из файла index.php фрагмент кода, который отвечает за вывод содержимого гостевой книги, в отдельный файл show.php:

<!-- блок отображения сообщений-->

<?php
	include ("dbconnect.php");
	
	$c=0;
	// выбор всех записей из БД, отсортированных так, что самая последняя отправленная запись
	// будет всегда первой.
	$r=mysql_query ("SELECT * FROM gb ORDER BY dt DESC"); 
	while ($row=mysql_fetch_array($r))  // для каждой записи организуем вывод.
	{
		if ($c%2)
			$col="bgcolor='#f9f9f9'";	// цвет для четных записей
		else
			$col="bgcolor='#f0f0f0'";	// цвет для нечетных записей
			
			?>
			<table border="0" cellspacing="3" cellpadding="0" width="90%" <? echo $col; ?>
					  style="margin: 10px 0px;">
			<tr>
				<td width="150" style="color: #999999;">Имя пользователя:</td>
				<td><?php echo $row['username']; ?></td>
			</tr>
			<tr>
				<td width="150" style="color: #999999;">Дата опубликования:</td>
				<td><?php echo $row['dt']; ?></td>
			</tr>	
			<tr>
				<td colspan="2" style="color: #999999;">
					---------------------------------------------------------------
				</td>
			</tr>		
			<tr>
				<td colspan="2">
					<?php echo $row['msg']; ?>
					<br>
				</td>
			</tr>
			
			</table>
			<?php
		$c++;
	}
	
	if ($c==0) // если ни одной записи не встретилось
		echo "Гостевая книга пуста!<br>";
	

?>

Как видим, в коде все осталось без изменений, просто теперь он находится в отдельном файле (поэтому добавилось подключение модуля dbconnect.php для соединения с БД).

В файле index.php, в месте, где раньше располагался вывод, размещаем контейнер:

<div id="messages">
</div>

В этот контейнер мы будем динамически загружать информацию с записями гостевой книги.

Далее в файле index.php следует форма ввода сообщения, её код остался практически без изменений, но:

1. Мы убрали атрибуты name, action и method, и функцию splash(), вызываемую по событию onClick (контроль заполнения формы остался, просто теперь эта проверка выполняется в другой части кода) из строки и добавили параметр id:

<form id="myForm">

2. Убрали строку со скрытым полем action

<input type="hidden" name="action" value="add">

3. Подписали id для всех полей ввода.

Как видно из изменений в форме, в нашем примере полностью изменилась процедура отправки данных на сервер и получение результатов с него.

Отправка данных и получение содержимого гостевой книги описано в следующем скрипте:

<script>

	// загрузка сообщений из БД в контейнер messages
	function show_messages()
	{
		$.ajax({
			url: "show.php",
			cache: false,
			success: function(html){
				$("#messages").html(html);
			}
		});
	}
		
	$(document).ready(function(){

		show_messages();
		
		// контроль и отправка данных на сервер в фоновом режиме
		// при нажатии на кнопку "отправить сообщение"
		$("#myForm").submit(function(){
		
			var name = $("#username").val();
			var msg  = $("#msg").val();
			if (name =='')
			{
				alert ("Заполните имя пользователя!");
				return false;
			}
			if (msg =='')
			{
				alert ("Заполните текст сообщения!");
				return false;
			}

			$.ajax({
				type: "POST",
				url: "action.php",
				data: "username="+name+"&msg="+msg+"&action=add",
				success: function(msg){
					show_messages();
			   }
			});
			
			return false;
		});
		
	});

</script>

Для того, чтобы событие submit не приводило к обновлению страницы в браузере, функция $("#myForm").submit() всегда должа возвращать значение false;

Использование библиотеки jQuery в данном примере заключается в вызове функции $.ajax(), а также для простой адресации к объектам и их параметрам, например $(“#username”).val() – получает значение из поля ввода имени пользователя (id=”username”).

Функция $.ajax() отрабатывает по разному в зависимости от параметров.

Например, в функции show_messages() с помощью функции $.ajax() происходит загрузка данных из файла show.php в фоновом режиме:

$.ajax({
	url: "show.php",
	cache: false,
	success: function(html){
		$("#messages").html(html);
	}
});

При успешной загрузке (параметр success), выполняется функция, заполняющая контейнер messages этими данными:

function(html){
		$("#messages").html(html);
}

А при обработке события нажатия на кнопку «Отправить сообщение» функция $.ajax() отправляет данные на сервер, опять же в фоновом режиме, не перегружая всю страницу:

$.ajax({
	type: "POST",
	url: "action.php",
	data: "username="+name+"&msg="+msg+"&action=add",
	success: function(msg){
		show_messages();
	}
});

Как мы видим, здесь используется метод POST (type: "POST") для отправки данных, как и в исходном примере. Данные из параметра data передаются файлу action.php (url: "action.php"). При успешной передаче данных, выполняется функция, описанная в параметре success, т.е. мы отображаем уже новые записи гостевой книги:

function(msg){
	show_messages();
}

Как видно из примера, загрузка и отправка сообщений гостевой книги происходит без полного обновления страницы, что экономит нам время и трафик.

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

Улучшения и упрощения принимаются по адресу: studio@pestr.ru

Статьи по теме

Основные приемы работы с СУБД MySQL, используя PHP и расширение mysqli;
Гостевая книга своими руками на PHP и MySQL;
Виджет комментариев ВКонтакте. Добавляем интерактивность на сайт за 10 минут;
AJAX и jQuery. Динамическое обновление контента. Основы;
AJAX и JavaScript. Загрузка контента без перезагрузки страницы;
AJAX и jQuery. Как загрузить скрипт JavaScript динамически?;
AJAX и jQuery. Передача параметров из PHP в JavaScript. Использование JSON;
Скрипт для голосования своими руками на PHP и MySQL с использованием AJAX;
Скрипт текстовой CAPTCHA для защиты от спам-ботов.







Rambler's Top100
© Студия Михаила Пестречихина, 2008-2017
При перепечатке и копировании статей с сайта указание автора и URL статьи обязательно!
Программный код, приведенный в статьях в качестве примеров, можно использовать без каких-либо ограничений.
Работоспособность, надежность и безопасность программного кода из примеров не гарантируется.
Хостинг «Джино»