jQuery-метод load() загружает данные с сервера и помещает возвращенный HTML-код в выбранный элемент. Этот метод обеспечивает простой способ загрузки данных асинхронно с веб-сервера. Основной синтаксис этого метода:

$(selector).load(URL, data, complete);

Параметры метода load() имеют следующие значения:

  • Обязательный параметр URL указывает URL-адрес файла, который вы хотите загрузить;
  • Необязательный параметр data указывает набор строки запроса (то есть пары ключ/значение), которая отправляется на веб-сервер вместе с запросом;
  • Необязательный параметр complete — это, по сути, функция обратного вызова, которая выполняется после завершения запроса. Обратный вызов запускается один раз для каждого выбранного элемента.

Давайте применим этот метод на реальной практике. Создайте пустой HTML-файл test-content.html и сохраните его где-нибудь на своем веб-сервере. Теперь поместите следующий HTML-код внутри этого файла:

<h1>Простая демонстрация Ajax</h1>
<p id="hint">Это простой пример загрузки Ajax.</p>
<p><img src="sky.jpg" alt="Cloudy Sky"></p>

Теперь создайте еще один HTML-файл с именем load-demo.html и сохраните его в том же месте, где вы сохранили предыдущий файл. Теперь поместите в него следующий HTML-код:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery load() Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("test-content.html");
    });
});
</script>
</head>
<body>
    <div id="box">
        <h2>Нажмите кнопку, чтобы загрузить новый контент в поле DIV</h2>
    </div>
    <button type="button">Загрузить содержимое</button>
</body>
</html>

Наконец, откройте эту страницу в браузере и нажмите кнопку «Загрузить содержимое». Вы увидите, что содержимое поля DIV заменяется содержимым HTML файла test-content.html.

Чтобы протестировать этот пример Ajax, вам нужно разместить HTML-файлы на веб-сервере. Вы можете настроить локальный веб-сервер на вашем компьютере, установив XAMPP, Open Server или Laragon. Подробнее см. Как выбрать локальный сервер для WordPress.

Ajax-запрос может быть сделан только для файлов, которые существуют на том же веб-сервере, который обслуживает страницу, с которой отправляется запрос Ajax, но не на внешние или удаленные серверы по соображениям безопасности.

Кроме того, функция обратного вызова может иметь три различных параметра:

  • responseTxt — Содержит результирующее содержимое, если запрос выполнен успешно;
  • statusTxt — содержит состояние запроса, например, успех или ошибка;
  • jqXHR— содержит объект XMLHttpRequest.

Вот измененная версия предыдущего примера, которая будет отображать либо сообщение об успешном завершении, либо сообщение об ошибке пользователю в зависимости от состояния запроса.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery load() Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("test-content.html", function(responseTxt, statusTxt, jqXHR){
            if(statusTxt == "success"){
                alert("New content loaded successfully!");
            }
            if(statusTxt == "error"){
                alert("Error: " + jqXHR.status + " " + jqXHR.statusText);
            }
        });
    });
});
</script>
</head>
<body>
    <div id="box">
        <h2>Нажмите кнопку, чтобы загрузить новый контент в поле DIV</h2>
    </div>
    <button type="button">Загрузить содержимое</button>
</body>
</html>

Загрузка фрагментов страницы c Ajax

jQuery-функция load() также позволяет нам извлекать только часть документа. Это просто достигается добавлением параметра url с пробелом, за которым следует селектор jQuery, давайте рассмотрим следующий пример, чтобы понять, как это работает.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery load() Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("test-content.html #hint");
    });
});
</script>
</head>
<body>
    <div id="box">
        <h2>Нажмите кнопку, чтобы загрузить новый контент в поле DIV</h2>
    </div>
    <button type="button">Загрузить содержимое</button>
</body>
</html>

jQuery-селектор #hint в параметре url (строка № 10) задает часть файла test-content.html, которая будет вставлена в поле DIV, — это элемент, который имеет атрибут ID со значением hint то есть id="hint".

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.