От автора: приветствую вас, друзья. В этой статье мы продолжим работать с Ajax запросами в jQuery. Библиотека jQuery предлагает несколько методов для работы с асинхронными запросами, используя которые мы можем обмениваться информацией с сервером без перезагрузки страницы, т.е. асинхронно. Сегодня мы познакомимся с методом load в jQuery.
Итак, друзья, мы уже можем выполнять асинхронные запросы и получать некий ответ от сервера. Однако это далеко не все, кроме методов ajax, post и get jQuery предлагает нам еще один интересный метод – это функция load.
Метод load позволяет не просто получить некие данные от сервера без перезагрузки страницы, а может сразу вставить их в нужное место страницы. Фактически он является неким аналогом функции include в PHP, т.е. подключает запрошенный файл. Чтобы было понятнее, давайте сразу перейдем к примеру. Допустим у нас есть пустой блок на странице:
|
1 2 3 4 5 6 7 |
<div class="container content"> <div class="row"> <div class="col-md-6" id="insert"> </div> </div> </div> |
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееИ в этот блок с идентификатором insert мы хотим подгрузить некий контент с другой страницы, например пусть это будет обычный список, который находится в файле list.html:
|
1 2 3 4 5 6 7 |
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> |
Пробуем использовать метод load:
|
1 2 3 |
$(function(){ $('#insert').load('list.html'); }); |
В результате работы кода список из другого файла действительно появится на странице, а в консоли мы увидим GET запрос, который и получил данный список.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееСам список при этом был добавлен именно в указанный блок:
Очень удобно, не так ли? Таким образом, мы можем подгружать любые данные из любых файлов. Например, такой метод часто используют при создании вкладок, переключаясь между которыми мы можем делать запрос к разным файлам, получая нужные данные для конкретной вкладки.
Кроме первого параметра, в котором мы указывали URL файла для асинхронного запроса, метод load может принимать еще два параметра. Вторым параметром мы можем передать некие данные на сервер в том же формате, что и для метода ajax. В качестве третьего параметра можно описать callback функцию, которая будет вызвана после выполнения запроса. В общем, все очень похоже на предыдущие изученные нами методы для выполнения асинхронных запросов.
Еще стоит отметить, что функция load позволяет производить фильтрацию данных. К примеру, в файле list.html у нас кроме списка есть еще какие-либо лишние данные, скажем параграф с текстом.
|
1 2 3 4 5 6 7 8 |
<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> |
Соответственно, мы его будем видеть на странице вместе со списком:
Но он нам не нужен. Не проблема. В первом параметре метода load через пробел после URL запроса мы можем указать селектор для фильтрации данных:
|
1 |
$('#insert').load('list.html ul'); |
Теперь данные будут отфильтрованы по указанному селектору (список ul), и мы получим нужный результат. На этом мы, пожалуй, остановимся. Исходники к статье вы можете скачать по ссылке. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
