Метод load()

Начнём с самого простого – загрузка 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, а доступа к сервер-сайду у вас нет или он ограничен.

Previous60% AJAX NextМетод ajax()

Last updated 10 months ago

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

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

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