Посмотри пример кажется на подобии того что ты хочешь.
Пример взят из книги "Прохоренок - jQuery.Новый стиль программирования на JavaScript.2010"
В качестве примера использования метода load О рассмотрим вывод каталога
фильмов. Изначально из базы данных MySQL выводятся только названия фильмов.
После щелчка на ссылке Показать с помощью технологии AJAX с сервера будет загружено
полное описание фильма и отображено в элементе DIV. Изначально элемент является
скрытым. После загрузки описаний мы отображаем этот элемент и изменяем текст
ссылки на Скрыть. Если щелкнуть мышью на этой ссылке, то описание будет скрыто, а текст
ссылки изменится на Показать. Повторный щелчок на ссылке Показать приводит
к отображению описания без повторной загрузки. SQL-запрос для создания таблицы
представлен в листинге 11.1. Содержимое файла index.php (основной файл)
представлено в листинге 11.2, а текст файла ajах.php (для вывода полного описания фильма)
содержится в листинге 11.3.
Листинг 11.1. SQL-запрос для создания таблицы
CREATE TABLE `films` (
`id` int(11) auto_increment,
`name` varchar(255) character set `utf8` collate `utf8_general_ci`,
`descr` text character set `utf8` collate `utf8_general_ci`,
PRIMARY KEY (`id`)
) engine=MYISAM character set `utf8` collate `utf8_general_ci`;
INSERT INTO `films` (`id`, `name`, `descr`) VALUES
(1, 'Фильм 1', 'Описание фильма 1'),
(2, 'Фильм 2', 'Описание фильма 2'),
(3, 'Фильм 3', 'Описание фильма 3');
Листинг 11.2. Содержимое файла index.php
<?php
// Запрещаем кеширование
header('Expires: Sun, 27 May 2007 01:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
// Указываем кодировку
header('Content-Type: text/html; charset=utf-8');
// Подключаемся к базе
$db = mysql_connect('localhost', 'root', '123456')
or die('Не удалось установить подключение');
mysql_select_db('test') or die('Такой базы данных нет');
mysql_query('SET NAMES `utf8`'); // Кодировка соединения
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Метод load()</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function f_show(id, elem) {
var div = $("#div" + id);
var link = $(elem);
if (div.is(":hidden")) {
if (div.text() == "") {
div.load("/ajax.php", { "id": id },
function(responseText, textStatus) {
if (textStatus == 'error') {
div.html("Ошибка при загрузке");
}
div.slideDown(300);
link.html("Скрыть");
});
}
else {
div.slideDown(300);
link.html("Скрыть");
}
}
else {
div.slideUp(300);
link.html("Показать");
}
}
//-->
</script>
</head>
<body>
<?php
$query = 'SELECT `id`, `name` FROM `films` ORDER BY `name`';
if ($res = mysql_query($query)) {
while ($row = mysql_fetch_row($res)) {
echo '<a href="#" onclick="f_show(' . $row[0] . ', this); ';
echo 'return false;">Показать</a> <b>';
echo htmlspecialchars($row[1], ENT_COMPAT, 'UTF-8');
echo "</b><br>\n";
echo '<div id="div' . $row[0] . '" style="display:none;">';
echo "</div>\n";
}
}
mysql_close($db);
?>
</body>
</html>
Листинг 11.3. Содержимое файла ajax.php
<?php
// Указываем кодировку
header('Content-Type: text/html; charset=utf-8');
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
exit('Данные отправлены не через AJAX');
}
if (isset($_POST['id'])) $id = (int)$_POST['id'];
else $id = 0;
if ($id === 0) exit('Параметр id содержит ошибку');
// Подключаемся к базе
$db = mysql_connect('localhost', 'root', '123456')
or die('Не удалось установить подключение');
mysql_select_db('test') or die('Такой базы данных нет');
mysql_query('SET NAMES `utf8`'); // Кодировка соединения
$query = 'SELECT `descr` FROM `films` WHERE `id`=' . $id;
if ($res = mysql_query($query)) {
if (mysql_num_rows($res) != 0) {
$row = mysql_fetch_row($res);
echo $row[0]; // Выводим описание
}
else {
echo 'Фильм не найден';
}
}
else {
echo 'Ошибка при выполнении запроса';
}
mysql_close($db);
?>
|