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:

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 запрос выполнится успешно. Необязательный параметр.
Функция принимает следующие параметры:
  • 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.

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

<!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 запрос со следующими параметрами:


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

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

В следующем примере мы рассмотрим как с помощью 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 запрос со следующими параметрами:


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

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

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.