Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery
(изменения от 26.11.2013)
Автор:
Источник: /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 кб.
Улучшения и упрощения принимаются по адресу:
Статьи по теме
Основные приемы работы с СУБД MySQL, используя PHP и расширение mysqli;
Гостевая книга своими руками на PHP и MySQL;
Виджет комментариев ВКонтакте. Добавляем интерактивность на сайт за 10 минут;
AJAX и jQuery. Динамическое обновление контента. Основы;
AJAX и JavaScript. Загрузка контента без перезагрузки страницы;
AJAX и jQuery. Как загрузить скрипт JavaScript динамически?;
AJAX и jQuery. Передача параметров из PHP в JavaScript. Использование JSON;
Скрипт для голосования своими руками на PHP и MySQL с использованием AJAX;
Скрипт текстовой CAPTCHA для защиты от спам-ботов.
|
