В этой статье познакомимся с сокращёнными AJAX методами jQuery: load, get, getJSON, getScript и post. Эти методы позволяют очень просто осуществлять необходимые AJAX запросы и в отличие от функции ajax, для их написания требуется меньшее количество строчек кода.

Метод load предназначен для получения данных с сервера по указанному адресу URL и помещения их в один или несколько выбранных элементов.

Метод load имеет следующий синтаксис:

Load(url [,data] [,complete]) // параметры в квадратных скобках являются необязательными //url - строка, содержащая URL адрес, на который необходимо отправить запрос //data (необязательный параметр) - данные, которые необходимо послать на сервер (в формате строки или объекта) //complete – дополнительные действия, которые необходимо выполнить после завершения запроса (указываются посредством функции Function(responseText, textStatus, xhr) ) // responseText - ответ сервера // textStatus - статус ответа // xhr - XMLHTTPRequest объект

В большинстве случаев для отправки запроса метод load использует GET. Но он также может использовать и метод POST. Это происходит только тогда, когда данные для отправки на сервер указываются не в формате строки, а посредством объекта.

1. Вставить содержимое файла asidenav.tpl в блок c id="asidenav" после загрузки DOM страницы:

... // после загрузки DOM страницы $(function() { // вставить в элемент (#asidenav) контент файла asidenav.tpl // если файл не находится в той же директории что и HTML документ, то необходимо дополнительно указать путь к нему $("#asidenav").load("asidenav.tpl"); });

2. Загрузить часть файла demo.html в элемент при клике по кнопке, расположенной в нём:

Получить контент файла demo.html ... $("#ajaxclick").click(function(){ // загрузить в элемент id="content1" часть файла demo.html (#content1) $(this).parent().load("demo.html #content1"); });

Контент файла demo.html:

Файл demo.html ... ...

3. Загрузить в элемент, имеющий id="result" ответ content.php . Данный ответ будет зависеть от значения атрибута data-content , которое имеет кнопка, пославшая AJAX-запрос на сервер.

Загрузить содержимое 1 Загрузить содержимое 2 Загрузить содержимое 3 ... // при нажатии на кнопку, имеющую класс load-ajax-click $(".load-ajax-content").click(function(){ // определим значение атрибута data-content var dataContent = $(this).attr("data-content"); // запросим данные из файла, с использованием значения атрибута data-content, и выведем их в элемент id="result" if (dataContent) { $("#result").load("content.php","content="+dataContent); } });