Начнём с самого простого – загрузка HTML-кода в необходимый нам DOM-элемент на странице. Для этой цели нам подойдет метод load(). Данный метод может принимать следующие параметры:
| аргумент | описание |
|---|---|
url | запрашиваемой страницы |
data | передаваемые данные (необязательный параметр) |
callback | функция, которая будет вызвана при завершении запроса к серверу (необязательный параметр) |
Теперь на примерах. Откройте подопытную страницу:
{% embed url="https://anton.shevchuk.name/book/code/ajax.load.html" %}
С помощью следующего запроса, в элемент с 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, а доступа к сервер-сайду у вас нет или он ограничен.