jQuery - AJAX Метод load()

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

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

jQuery Метод load()

Синтаксис:

$(селектор).load(URL,данные,обратный_вызов);

Необходимый параметр URL определяет адрес URL, который Вы хотите загрузить.

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

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

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

<h4>jQuery и AJAX - это КРУТО!!!</h4>
<p id="p1">Это некоторый текст в параграфе.</p>

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

Пример

$("#div1").load("demo_test.txt");

Попробуйте сами »

Также можно добавить селектор jQuery к параметру URL.

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

Пример

$("#div1").load("demo_test.txt #p1");

Попробуйте сами »

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

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

Следующий пример выводит на экран окно предупреждения после того, как метод load() завершается. Если метод load() завершился успешно, он выводит на экран "Внешний контент загружен успешно!", и если метод дал сбой, он выводит на экран сообщение об ошибке:

Пример

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("Внешний контент загружен успешно!");
    if(statusTxt=="error")
      alert("Ошибка: "+xhr.status+": "+xhr.statusText);
  });
});

Попробуйте сами »

Далее: JavaScript 101 - Анатомия Веб-страницы

Смотрите также
Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)