Метод jQuery AJAX load()

Метод jQuery load()

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

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

Грамматика:

$("}})).load(URL,data,callback);

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

Опциональный data Параметр определяет набор ключ/значений, отправляемых вместе с запросом.

Опциональный callback Параметр указывает на имя функции, которую нужно выполнить после выполнения метода load().

Содержимое примерного файла ("demo_test.txt"):

<h2>jQuery и AJAX это FUN!!!</h2>
<p id="p1">Это текст в абзаце.</p>

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

Пример

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

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

Вы также можете добавить jQuery селектор в параметры URL.

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

Пример

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

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

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

  • 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);
  });
});

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

Руководство по jQuery AJAX

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