Наше прошлое 20072009201120132014
г. Москва, ул. Гостиничная, д. 7А. кор.2
8 (499) 404-26-56
пн-пт 11:00 - 19:00
 

Работа с Ajax при помощи JQuery

Пример работы:

Статья 1 / Статья 2

Сюда будут подгружаться данные

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

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

Скачать исходник

При разработке интернет магазинов очень часто возникает необходимость в подгрузке данных, но без перезагрузки самой страницы. Например, у нас на сайте есть раздел «Расчет стоимости сайта», в нем при выборе типа сайта, динамически подгружается состав выбранного сайта. Состав храниться в базе данных, и при изменении списка «Тип сайта», идет ajax запрос к php скрипту, который выбирает из бд название модулей, и формирует html страницу.

Комментарии

Нет комментариев

Заполните все поля

Написать комментарий

Ваше имя

Комментарий