Последние учебники веб-разработки
 

jQuery - AJAX load() Method

❮ Предыдущая Следующая Глава ❯

JQuery load() Метод

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

В load() метод загружает данные с сервера и помещает полученные данные в выбранный элемент.

Синтаксис:

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

Обязательный параметр URL определяет URL, который вы хотите загрузить.

Необязательный параметр данных определяет набор querystring пар ключ / значение для отправки вместе с запросом.

Необязательный параметр обратного вызова является имя функции , которая будет выполнена после того, как load() метод завершается.

Вот содержание нашего примера файла: "demo_test.txt" :

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

Следующий пример загружает содержимое файла "demo_test.txt" в конкретный <div> элемента:

пример

$("#div1").load("demo_test.txt");
Попробуй сам "

Кроме того, можно добавить селектор JQuery в параметре URL.

Следующий пример загружает содержимое элемента с id="p1" , внутри файла "demo_test.txt" , в определенный <div> элемент:

пример

$("#div1").load("demo_test.txt #p1");
Попробуй сам "

Необязательный параметр обратного вызова определяет функцию обратного вызова, выполняемую , когда load() метод завершается. Функция обратного вызова может иметь различные параметры:

  • responseTxt - содержит результирующий контент , если вызов успешен
  • statusTxt - содержит данные о состоянии вызова
  • xhr - содержит XMLHttpRequest объект

В следующем примере выводится окно предупреждения после load() метод завершается. Если load() метод успешно, он отображает "External content loaded successfully!" , И если он не отображается сообщение об ошибке:

пример

$("button").click(function(){
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
        if(statusTxt == "success")
            alert("External content loaded successfully!");
        if(statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
});
Попробуй сам "

JQuery AJAX Reference

Полный обзор всех методов JQuery AJAX, пожалуйста , перейдите на наш JQuery AJAX Reference .


❮ Предыдущая Следующая Глава ❯