Ajax запрос в jQuery. Часть 3

Ajax запрос в jQuery

От автора: приветствую вас, друзья. В этой статье мы продолжим работать с Ajax запросами в jQuery. Библиотека jQuery предлагает несколько методов для работы с асинхронными запросами, используя которые мы можем обмениваться информацией с сервером без перезагрузки страницы, т.е. асинхронно. Сегодня мы познакомимся с методом load в jQuery.

Итак, друзья, мы уже можем выполнять асинхронные запросы и получать некий ответ от сервера. Однако это далеко не все, кроме методов ajax, post и get jQuery предлагает нам еще один интересный метод – это функция load.

Метод load позволяет не просто получить некие данные от сервера без перезагрузки страницы, а может сразу вставить их в нужное место страницы. Фактически он является неким аналогом функции include в PHP, т.е. подключает запрошенный файл. Чтобы было понятнее, давайте сразу перейдем к примеру. Допустим у нас есть пустой блок на странице:

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

И в этот блок с идентификатором insert мы хотим подгрузить некий контент с другой страницы, например пусть это будет обычный список, который находится в файле list.html:

Пробуем использовать метод load:

В результате работы кода список из другого файла действительно появится на странице, а в консоли мы увидим GET запрос, который и получил данный список.

Ajax запрос в jQuery

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Сам список при этом был добавлен именно в указанный блок:

Ajax запрос в jQuery

Очень удобно, не так ли? Таким образом, мы можем подгружать любые данные из любых файлов. Например, такой метод часто используют при создании вкладок, переключаясь между которыми мы можем делать запрос к разным файлам, получая нужные данные для конкретной вкладки.

Кроме первого параметра, в котором мы указывали URL файла для асинхронного запроса, метод load может принимать еще два параметра. Вторым параметром мы можем передать некие данные на сервер в том же формате, что и для метода ajax. В качестве третьего параметра можно описать callback функцию, которая будет вызвана после выполнения запроса. В общем, все очень похоже на предыдущие изученные нами методы для выполнения асинхронных запросов.

Еще стоит отметить, что функция load позволяет производить фильтрацию данных. К примеру, в файле list.html у нас кроме списка есть еще какие-либо лишние данные, скажем параграф с текстом.

Соответственно, мы его будем видеть на странице вместе со списком:

Ajax запрос в jQuery

Но он нам не нужен. Не проблема. В первом параметре метода load через пробел после URL запроса мы можем указать селектор для фильтрации данных:

Теперь данные будут отфильтрованы по указанному селектору (список ul), и мы получим нужный результат. На этом мы, пожалуй, остановимся. Исходники к статье вы можете скачать по ссылке. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree