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

Ajax запрос в jQuery

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

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

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

<div class="container content">
 <div class="row">
  <div class="col-md-6" id="insert">
 
  </div>
 </div>
</div>

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

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
</ul>

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

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
$(function(){
 $('#insert').load('list.html');
});

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

Ajax запрос в jQuery

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

Ajax запрос в jQuery

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

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

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

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
</ul>
<p>Lorem ipsum dolor sit amet.</p>

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

Ajax запрос в jQuery

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

$('#insert').load('list.html ul');

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

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree