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".

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

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

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

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