jQuery метод load() - это простой, но мощный метод AJAX.
Метод load() загружает данные с сервера и помещает их в выбранный элемент.
Синтаксис:
$(селектор).load(URL,data,callback);
Обязательный параметр URL определяет URL, откуда следует загрузить данные.
Необязательный параметр data определяет набор данных, посылаемых на сервер во время запроса. Данные должны определяться в виде объекта из пар "ключ/значение".
Необязательный параметр callback определяет имя функции, которая будет вызвана, когда метод 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" в элемент с идентификатором "div1":
$("#div1").load("demo_test.txt");
Также можно добавлять селектор jQuery в параметр URL, осуществляя частичную вставку данных, полученных от сервера. Т.е. проводить их фильтрацию по селектору.
В следующем примере загружается содержимое элемента с идентификатором id="p1" в файле "demo_test.txt" в элемент с идентификатором "div1":
$("#div1").load("demo_test.txt #p1");
Необязательный параметр callback определяет функцию обратного вызова, которая будет запускаться, когда метод 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("Error: " + xhr.status + ": " + xhr.statusText);
});
});