jQuery функция $.get()

Определение и применение

jQuery функция $.get() позволяет загрузить данные с сервера с помощью HTTP запроса методом GET. Для загрузки данных с помощью HTTP запроса методом POST вы можете воспользоваться jQuery функцией $.post().

Метод GET в отличии от POST при отправке формы передает собранную информацию как часть URL:

JavaScript
url?name=value&name=value // метод GET использует пары имя = значение

При отправке формы методом POST данные обычно находятся в теле запроса, а не в URL, но остаются доступны пользователю в инструментах разработчика. Сам метод POST не шифрует данные; для защиты передачи требуется HTTPS.

Обратите внимание на некоторые нюансы при работе с HTTP методами GET и POST:

  • У HTTP нет единого ограничения URL в 3000 символов: предел зависит от браузера, сервера и промежуточных узлов. Размер тела POST-запроса также может ограничиваться сервером.
  • Никогда не используйте метод GET, если вам необходимо передать конфиденциальные данные (например, пароль пользователя, так как он будет передан в строке URL - в открытом виде).
  • Страница, сгенерированную методом GET, можно пометить закладкой (адрес страницы всегда будет уникальный), а страницу, сгенерированную метод POST нельзя, так как адрес страницы не изменяется (данные в URL не передаются).
  • Учтите, что с использованием метода GET можно передать данные не через форму, а через URL страницы.

jQuery синтаксис:

Синтаксис 1.0:

JavaScript
$.get( url, data, success, dataType );

url - String

data - PlainObject, или String

success - Function( PlainObject data, String textStatus, jqXHR jqXHR )

dataType - String

Синтаксис 1.12/2.2:

JavaScript
$.get( {settings} ); // параметры запроса передаются в объекте

settings - PlainObject

Добавлен в версии jQuery

1.0

Значения параметров

Параметр Описание
url Строка, содержащая URL адрес, на который отправляется AJAX запрос. Обязательный параметр.
data Объект или строка, которые будут отправлены на сервер вместе с AJAX запросом. Данные, отправляемые на сервер добавляются к URL в строке запроса. Если значение параметра данных является простым объектом, то он кодируется и преобразуется в строку URL, прежде чем он будет добавлен к URL адресу. Необязательный параметр.
success Функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно. Необязательный параметр.
Функция принимает следующие параметры:
  • data - данные возвращенные с сервера.
  • textStatus - строка описывающая статус запроса.
  • jqXHR - объект jqXHR (до версии jQuery 1.4.x объект XMLHttpRequest).
dataType Определяет тип данных, который вы ожидаете получить от сервера. Если тип данных не указан, то jQuery будет пытаться определить его на основе типа MIME из ответа (XML тип MIME приведет к получению XML, с версии jQuery 1.4 json будет давать объект JavaScript, script будет выполнять скрипт, а все остальное будет возвращено в виде строки). Необязательный параметр.

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

  • "xml" - возвращает XML документ, который может быть обработан с помощью jQuery.
  • "html" - возвращает HTML как обычный текст, теги <script> будут обработаны и выполнены после вставки в объектную модель документа (DOM).
  • "script" - расценивает ответ как JavaScript и возвращает его как обычный текст. Отключает кэширование с помощью добавления параметра к строке запроса _=[TIMESTAMP], даже если парамета cache имеет значение true. Это превратит метод POST в GET для кроссдоменных запросов.
  • "json" - расценивает ответ как JSON и возвращает объект JavaScript. Кроссдоменные "json" запросы преобразуются в "jsonp", если в параметрах запроса не указано jsonp: false. Данные JSON парсятся в строгом порядке и должны соответствовать общепринятому формату, любой некорректный JSON отвергается и выдается ошибка. С версии jQuery 1.9, пустой ответ не принимается, сервер должен вернуть в качестве ответа NULL, или {}.
  • "jsonp" - загружает данные в формате JSON, используя при этом формат загрузки JSONP. Добавляет дополнительный параметр "?callback=?" в конец URL адреса для указания имени функции обработчика. Отключает кэширование путем добавления параметра _=[TIMESTAMP] к URL адресу,даже если парамета cache имеет значение true.
  • "text" - обычная текстовая строка.
  • несколько значений - значения разделяются пробелом. Начиная с версии 1.5, jQuery может преобразовать тип данных, который получен в Content-Type заголовка, в тип данных, который вам требуется. Например, если вы хотите, чтобы текстовый ответ был расценен как XML, используйте "text XML" для этого типа данных. Вы также можете сделать JSONP запрос, получить его в виде текста и интерпретировать его в формате XML: "jsonp text XML". Следующая строка позволит сделать тоже самое: "jsonp XML", jQuery будет пытаться конвертировать из JSONP в XML, после неудачной попытки попытается преобразовать JSONP в текст, а затем из текста уже в XML.

Пример использования

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Пример использования jQuery функции $.get()</title>
    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
    <script>
      $(document).ready(function () {
        $("form").submit(function () {
          event.preventDefault(); // отменяем действие события по умолчанию
          var formData = $(this).serialize(); // создаем переменную, которая содержит закодированный набор элементов формы в виде строки

          $.get("user-preview", formData, function (data) {
            //  передаем и загружаем данные с сервера с помощью HTTP запроса методом GET
            $("div").html(data); // вставляем в элемент <div> данные, полученные от сервера
          });
        });
      });
    </script>
  </head>
  <body>
    <form>
      <!-- метод GET по умолчанию -->
      <input type="text" placeholder="Имя" name="firstName" required />
      <!-- поле обязательно к заполнению -->
      <input type="text" placeholder="Фамилия" name="lastName" required />
      <!-- поле обязательно к заполнению -->
      <input type="submit" value="Добавить" />
    </form>
    <div></div>
  </body>
</html>

В этом примере мы привязываем JavaScript обработчик событий "submit" (обработчик отправки формы), который срабатывает в момент отправки (в нашем случае заполненной) формы при нажатии на элемент <input> с типом submit (кнопка для отправки формы). При отправке формы мы вызываем JavaScript метод event.preventDefault(), который позволяет нам отменить действие события по умолчанию и избежать перезагрузки страницы и передачи собранной информации как часть URL (url?firstName=значение&lastName=значение).

Кроме того, мы создаем переменную, которая содержит закодированный набор элементов формы в виде строки - результат выполнения метода .serialize(). После этого с использованием jQuery функции $.get() выполняем асинхронный AJAX запрос со следующими параметрами:

  • url - файл, к которому мы обращаемся ("user-preview"), он содержит следующий PHP код:
    Код
    <?php
  $firstName = $_GET['firstName']; // создаем переменную firstName, которая содержит переданные скрипту через HTTP метод GET данные (с ключом firstName)
  $lastName = $_GET['lastName']; // создаем переменную lastName, которая содержит переданные скрипту через HTTP метод GET данные (с ключом lastName)
  echo "Пользователь ".$firstName." ".$lastName." добавлен"; // выводим текстовое содержимое (значение выше созданных переменных)
?>
  • data - данные, которые будут отправлены на сервер (значение переменной formData).
  • success - функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно. Обратите внимание, что один из параметров функции (data) содержит данные возвращенные с сервера, которые мы и вставляем в элемент <div> с помощью метода .html().

Учебный GET-ответ: данные не сохраняются

Исходный код для изучения. Запуск на этой странице недоступен.

index.html
HTML
<form>
  <input type="text" placeholder="Имя" name="firstName" required="" />
  <input type="text" placeholder="Фамилия" name="lastName" required="" />
  <input type="submit" value="Добавить" />
</form>
<div></div>
main.js
JavaScript
$(document).ready(function () {
    $('form').submit(function () {
        event.preventDefault()
        var formData = $(this).serialize()

        $.get('user-preview', formData, function (data) {
            $('div').html(data)
        })
    })
})

Результат нашего примера:

В следующем примере мы рассмотрим как с помощью jQuery функции $.get() загрузить JSON файл и выведем из него некоторую информацию:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Пример использования функции $.get (загрузка JSON файла)</title>
    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
    <script>
      $(document).ready(function () {
        $.get("person.json", function (data) {
          //  загружаем данные с сервера с помощью HTTP запроса методом GET
          $("div").html(data.firstName + " " + data.age); // вставляем в элемент <div> данные, полученные от сервера
        });
      });
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

В этом примере при загрузке документа мы с использованием jQuery функции $.get() выполняем асинхронный AJAX запрос со следующими параметрами:

  • url - файл, к которому мы обращаемся ("person.json"), он имеет следующее содержимое:
    JSON
    {
	"firstName": "Борис",
	"lastName": "Бритва",
	"age": 25,
	"phone": 88005553535
}
  • success - функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно. Обратите внимание, что один из параметров функции (data) содержит данные возвращенные с сервера (JSON файл), которые мы частично вставляем в элемент <div> с помощью метода .html().

Пример использования функции $.get (загрузка JSON файла)

Исходный код для изучения. Запуск на этой странице недоступен.

index.html
HTML
<div></div>
main.js
JavaScript
$(document).ready(function () {
    $.get('person.json', function (data) {
        $('div').html(data.firstName + ' ' + data.age)
    })
})

Результат нашего примера:

Пример использования jQuery функции $.get()
Пример использования функции $.get (загрузка JSON файла)