Ajax запрос HTML-данных

Осуществляет запрос к серверу без перезагрузки страницы. Получает HTML-данные от сервера и помещает их внутрь выбранных элементов.

По умолчанию выполняется как запрос типа GET, однако, если будут переданы дополнительные данные в форме объекта, пар ключ/значение, то операция выполнится как запрос типа POST. Дополнительные параметры, указанные как строка, НЕ приведут к запросу типа POST. Функция имеет несколько необязательных параметров.

  • url — url-адрес, по которому будет отправлен запрос.
  • data — данные, которые будут отправлены на сервер. Они должны быть представлены в форме объекта, в формате: {fName1:value1, fName2:value2, …}.
  • complete (data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.
    • data данные, присланные с сервера.
    • textStatus статус того, как был выполнен запрос.
    • jqXHR объект jqXHR (в версиях до jquery-1.5, вместо него использовался XMLHttpRequest)

Этот метод является самым простым способом извлечения данных с сервера. Он представляет из себя альтернативу использования метода $.get(url, data, success). В случае успешного запроса, метод .load() формирует HTML содержание, которое может быть вставлено на страницу. Это значит, что мы можем делать запросы следующим образом:

Если селектора не существует — в нашем случае, если в документе нет блока с id=»result» — Ajax запрос не будет выполнен.

Функция обратного действия

Если задана функция обратного действия «complete», она будет выполнена после того как сформируется и вставится на страницу HTML содержимое. Она запускается для каждого объекта коллекции jQuery.

В случае, если блока с id=»result» не существует, запрос не будет выполнен.

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

Метод .load() позволяет загружать в выбранный элемент только часть страницы ( чего нельзя сделать с $.get() ). Для этого необходимо после адреса файла указать селектор той области страницы, которую нужно извлечь.

В этом примере со страницы test.html будет загружен HTML фрагмент из блока с id=»container». Сначала метод извлекает содержимое файла ajax/test.html, в потом jQuery парсит результат и, благодаря селектору, находит тот фрагмент, который нужен. Найденный фрагмент будет вставлен на страницу, всё остальное будет опущено.

Выполнение скрипта

При использовании метода .load() с указанием селектора, контент будет пропущен через метод .html(), таким образом все скрипты будут удалены. При загрузке без селектора, все скрипты будут загружены в соответствии с приоритетом.

В данном примере весь JavaScript, загруженный в элемент #a, как часть документа, будет успешно выполнен.

Но, в следующем случае, скрипты загруженного документа, прикреплённого к элементу #b не будут выполнены:

 

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *