jQuery - AJAX load() метод

jQuery load() метод является простым, но мощным AJAX методом.

Метод load() jQuery

jQuery load()Метод загружает данные с сервера и вставляет возвращаемый HTML в выбранный элемент.

Этот метод предоставляет простой способ асинхронной загрузки данных с веб-сервера.

Этоload()Синтаксис метода:

$(selector).load(URL, data, callback)

Параметры:

• URL-Указать URL, который вы хотите запросить

• data -(опционально) Указать чистый объект или строку, отправляемую вместе с запросом на сервер

• callback-(Опционально) Указать каллбэк-функцию, которая будет выполнена после завершения метода load()

Пример загрузки содержимого файла "ajax_intro.txt" в элемент DIV:

$("button").click(function(){
　　$("div").load("ajax_intro.txt");
});

Пример загрузки страницы "ajax_post.html" и отправки некоторых другихДанные:

$("button").click(function(){
　　let data = {fname: "Seagull", lname: "Anna"};
　　$("div").load("ajax_post.php", data);
});

Вот как выглядит вид PHP файла ("ajax_post.html"):

<?php
　　　　echo "<p>Hello " . $_POST['fname'] . " " . $_POST['lname'] . ", Как у вас дела?</p>";
?>

Метод запроса:Если указатьДанныеЕсли предоставляется в виде объекта, используется метод POST. В противном случае, предполагается GET.

Использование каллбэка для загрузки страницы

ДополнительныеcallbackПараметры указанияload()Каллбэк-функция, которая должна быть выполнена после завершения метода.

Каллбэк-функция может иметь различные параметры:

• response　 -включает результаты данных в запросе

• status -включает состояние запроса ("успех", "неизменен", "ошибка", "тайм-аут", или "parsererror")

• xhr-Включает объект XMLHttpRequest

Пример загрузки страницы "ajax_post.html" и отправки некоторых других данных и сообщения о состоянии ошибки:

$("button").click(function(){
　　let data = {fname: "Seagull", lname: "Anna"};
　　function(response, status) {
　　　　alert(status);
　　});
});

Пример, показывающий уведомление при возникновении ошибки в запросе Ajax:

$("button").click(function(){
　　let data = {fname: "Seagull", lname: "Anna"};
　　function(response, status, xhr) {
　　　　if(status　==　"error"){
　　　　　　let　msg　=　"Sorry　but　there　was　an　error:　";
　　　　　　$("#error").html(msg　+　xhr.status　+　"　"　+　xhr.statusText);
　　　　}
　　});
});

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

jQuery load()Метод также позволяет нам получить только часть документа.

Это можно просто реализовать, добавив пустую строку и jQuery-выборщик в параметр url.

Следующий пример загружает содержимое элемента с ID "table" из файла "ajax_load.html" в элемент DIV:

$("button").click(function(){
　　$("div").load("ajax_load.html　#table");
});

Референтное руководство по AJAX jQuery

Для получения полной информации о методах AJAX, пожалуйста, посетите нашРеферентное руководство по AJAX jQuery.