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