Все ленты — последние статьи

Работа с Ajax при помощи JQuery — динамика без перезагрузки

Первоисточник http://blog.ox2.ru/php/ajax/

 

 

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

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

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

Article 1

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

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

Для примера сделаем небольшой проект, в нем будет 2 ссылки «Статья 1», и «Статья 2».

При нажатии на «Статья 1» подгружается файл «article_1.html», «Статья 2» — файл «article_2.html».

Для удобства будем использовать фраймворк Jquery.

Ниже приведен код ajax запроса, с подробным описанием:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    <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 страницу.

OX2 2014-10-03 2014-10-03