jQuery функция $.get()
jQuery AJAXОпределение и применение
jQuery функция $.get() позволяет загрузить данные с сервера с помощью HTTP запроса методом GET. Для загрузки данных с помощью HTTP запроса методом POST вы можете воспользоваться jQuery функцией $.post().
Обращаю Ваше внимание, что функция $.get() является сокращенной версией функции $.ajax() со следующими параметрами:
$.ajax({ url: "url", // строка, содержащая URL адрес, на который отправляется запрос data: data, // данные, которые будут отправлены на сервер success: success, // функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно dataType: "dataType" // тип данных, который вы ожидаете получить от сервера });
Метод GET в отличии от POST при отправке формы передает собранную информацию как часть URL:
url?name=value&name=value // метод GET использует пары имя = значение
При отправке данных методом POST данные передаются таким образом, что пользователь уже не видит передаваемые обработчику формы данные (добавляет данные формы в теле запроса http, которые не отображаются в URL).
Обратите внимание на некоторые нюансы при работе с HTTP методами GET и POST:
- Метод GET ограничивает объём передаваемой в URL информации (около 3000 символов), метод POST не имеет подобных ограничений.
- Никогда не используйте метод GET, если вам необходимо передать конфиденциальные данные (например, пароль пользователя, так как он будет передан в строке URL - в открытом виде).
- Страница, сгенерированную методом GET, можно пометить закладкой (адрес страницы всегда будет уникальный), а страницу, сгенерированную метод POST нельзя, так как адрес страницы не изменяется (данные в URL не передаются).
- Учтите, что с использованием метода GET можно передать данные не через форму, а через URL страницы.
jQuery синтаксис:
Синтаксис 1.0: $.get( url, data, success, dataType ); url - String data - PlainObject, или String success - Function( PlainObject data, String textStatus, jqXHR jqXHR ) dataType - String Синтаксис 1.12/2.2: $.get( {settings} ); // параметры запроса передаются в объекте settings - PlainObject
Добавлен в версии jQuery
1.0Значения параметров
| Параметр | Описание |
|---|---|
| url | Строка, содержащая URL адрес, на который отправляется AJAX запрос. Обязательный параметр. |
| data | Объект или строка, которые будут отправлены на сервер вместе с AJAX запросом. Данные, отправляемые на сервер добавляются к URL в строке запроса. Если значение параметра данных является простым объектом, то он кодируется и преобразуется в строку URL, прежде чем он будет добавлен к URL адресу. Необязательный параметр. |
| success | Функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно. Необязательный параметр. Функция принимает следующие параметры:
|
| dataType | Определяет тип данных, который вы ожидаете получить от сервера. Если тип данных не указан, то jQuery будет пытаться определить его на основе типа MIME из ответа (XML тип MIME приведет к получению XML, с версии jQuery 1.4 json будет давать объект JavaScript, script будет выполнять скрипт, а все остальное будет возвращено в виде строки). Необязательный параметр. Доступные типы (результат передается в качестве первого аргумента в функцию обратного вызова success):
|
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования jQuery функции $.get()</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $( document ).ready(function(){ $( "form" ).submit(function(){ event.preventDefault(); // отменяем действие события по умолчанию var formData = $( this ).serialize(); // создаем переменную, которая содержит закодированный набор элементов формы в виде строки $.get( "user2.php", 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 - файл, к которому мы обращаемся ("user2.php"), он содержит следующий 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().
Результат нашего примера:
В следующем примере мы рассмотрим как с помощью jQuery функции $.get() загрузить JSON файл и выведем из него некоторую информацию:
<!DOCTYPE html> <html> <head> <title>Пример использования функции $.get (загрузка JSON файла)</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $( document ).ready(function(){ $.get( "test.json", function( data ) { // загружаем данные с сервера с помощью HTTP запроса методом GET $( "div" ).html( data.firstName + " " + data.age ); // вставляем в элемент <div> данные, полученные от сервера }) }); }); </script> </head> <body> <div></div> </body> </html>
В этом примере при загрузке документа мы с использованием jQuery функции $.get() выполняем асинхронный AJAX запрос со следующими параметрами:
- url - файл, к которому мы обращаемся ("test.json"), он имеет следующее содержимое:
{ "firstName": "Борис", "lastName": "Бритва", "age": 25, "phone": 88005553535 }
- success - функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно. Обратите внимание, что один из параметров функции (data) содержит данные возвращенные с сервера (JSON файл), которые мы частично вставляем в элемент <div> с помощью метода .html().
Результат нашего примера:
