Уроки по PHP
JavaScript
Уроки по HTML
Дизайнерам
СЕОшникам
РазноеПри разработке интернет магазинов очень часто возникает необходимость в подгрузке данных, но без перезагрузки самой страницы.
Например, у нас на сайте есть раздел «Расчет стоимости сайта», в нем при выборе типа сайта, динамически подгружается состав выбранного сайта. Состав храниться в базе данных, и при изменении списка «Тип сайта», идет ajax запрос к php скрипту, который выбирает из бд название модулей, и формирует html страницу.
Для примера сделаем небольшой проект, в нем будет 2 ссылки «Статья 1», и «Статья 2».
При нажатии на «Статья 1» подгружается файл «article_1.html», «Статья 2» - файл «article_2.html».
Для удобства будем использовать фраймворк Jquery.
Ниже приведен код ajax запроса, с подробным описанием:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Работа с Ajax при помощи JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/*
Функция отправляет ajax-запрос
result_id - id элемента, в который будет подгружена информация
url - адрес страницы, которая будете подгружена
*/
function AjaxRequest(result_id,url) {
jQuery.ajax({
url: url, //Адрес подгружаемой страницы
type: "POST", //Тип запроса
dataType: "html", //Тип данных
error: function (){ //Если ошибка
alert("Ошибка соединения");
},
//success - функция, которая вызывается, когда
//запрос прошёл успешно и данные (data) получены
success: function(response){
document.getElementById(result_id).innerHTML = response;
}
});
}
</script>
</head>
<body>
<h1>Пример динамической подгрузки страницы при помощи Ajax</h1>
'<a href="javascript:void(0)" onclick="AjaxRequest('result','article_1.html');">Статья 1</a>
/ <a href="javascript:void(0)" onclick="AjaxRequest('result','article_2.html'); ">Статья 2</a>'
<div id="result">
Сюда будут подгружаться данные
</div>
</body>
</html>
Комментарии
Заполните все поля
Написать комментарий