Работа с Ajax при помощи JQuery
При разработке интернет магазинов очень часто возникает необходимость в подгрузке данных, но без перезагрузки самой страницы.
Например, у нас на сайте есть раздел «Расчет стоимости сайта», в нем при выборе типа сайта, динамически подгружается состав выбранного сайта. Состав храниться в базе данных, и при изменении списка «Тип сайта», идет 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>Скачать исходник
