jQuery для начинающих
BlogGitHub
  • jQuery для начинающих
  • Об авторе
  • О книге
  • Условия распространения
  • 0% Об HTML, CSS и JavaScript
    • Семантическая вёрстка
    • Валидный HTML
    • CSS-правила и селекторы
    • CSS. Погружение
    • Разделяй и властвуй
    • Немного о JavaScript
  • 10% Подключаем, находим, готовим
    • Будь готов!
    • Селекторы
    • Селекторы и Sizzle
    • Оптимизация
  • 20% Атрибуты и свойства элементов
    • CSS стили
    • CSS классы
    • Атрибуты
    • Свойства
    • Размеры
    • Позиция
    • Data-атрибуты
  • 30% События
    • Работа с событиями
    • Всплытие и обработка событий
    • Пространство имен
    • «Живые» события
    • Touch-события
    • Оптимизация
    • Дополнение
  • 40% Анимация
    • Easing функции
    • Прогресс
    • Шаг за шагом
    • В очередь…©
    • Отключение
  • 50% Манипуляции с DOM
    • Создание элементов
    • Манипуляции над элементами
    • Управление содержимым
    • Клонирование и удаление
    • Полоса прокрутки
  • 60% AJAX
    • Метод load()
    • Метод ajax()
    • Обработчики событий
    • Лечим JavaScript-зависимость
    • Сила JSONP
    • Прокачиваем AJAX
  • 70% Ассинхронность
    • Deferred
    • When
    • Callbacks
  • 80% Работа с формами
    • События
    • Манипуляциия над элементами
  • 90% Пишем свой плагин
    • Первый плагин
    • Data реестр
    • Animate
    • Easing
    • Sizzle
  • 100% Последняя глава
  • Дополнение
    • jQuery UI
      • Пишем свой widget
    • jQWidgets
    • Ещё плагины
    • Обновление на версию 2.х
    • Обновление на версию 3.х
    • Обновление на версию 4.х
  • История изменений
  • Благодарности
Powered by GitBook
On this page
  1. 60% AJAX

Метод load()

Previous60% AJAXNextМетод ajax()

Last updated 1 year ago

Начнём с самого простого – загрузка HTML-кода в необходимый нам DOM-элемент на странице. Для этой цели нам подойдет метод load(). Данный метод может принимать следующие параметры:

url

запрашиваемой страницы

data

передаваемые данные (необязательный параметр)

callback

функция, которая будет вызвана при завершении запроса к серверу (необязательный параметр)

Теперь на примерах. Откройте подопытную страницу:

С помощью следующего запроса, в элемент с id="content" будет вставлен весь HTML с указанной страницы:

// в элемент с id="content" будет вставлен HTML с указанной страницы
$("#content").load("example.html");

Как видите, подгружается весь HTML вместе со всеми стилями. Чтобы избежать подобного беспорядка, из подгружаемой странички следует выбрать лишь нужный нам элемент. Для этого достаточно через пробел указать селектор:

// в элемент с id="content" будет вставлен HTML с указанной страницы,
// но не весь, а только выбранный по указанному селектору тег main
$("#content").load("example.html main");

По окончании загрузки мы можем вызвать произвольную функцию для обработки подгружаемого HTML. Вот только данная функция сработает лишь после того, как контент будет добавлен в целевой элемент, а мне бы хотелось этим процессом управлять:

// обрабатываем полученные данные
$("#content").load("example.html main", function(data) {
    // ничего оригинальней не придумал
    alert("Мы загрузили HTML длиной в " + data.length + " символов");
});

Если вам надо передать на сервер какие-либо данные, то это можно легко сделать следующим образом:

// передаём данные на сервер вторым параметром
// вот только сервер наш их никак не обрабатывает
// но вы можете увидеть данные в консоли, в отправленных запросах
$("#content").load("example.html main", { id: 42 });

Из моего опыта работы – вам очень часто придётся пользоваться методом load() как описано в первом примере. А ещё советую запомнить второй пример, он может выручить, когда надо реализовать загрузку через AJAX, а доступа к сервер-сайду у вас нет или он ограничен.

Пример загрузки HTML посредством метода "load()"
Logo