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

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

jQuery функция $.getJSON() позволяет загрузить закодированные в формате JSON данные с сервера, с помощью HTTP запроса методом GET. Начиная с версии jQuery 1.4, если JSON файл содержит синтаксическую ошибку, то запрос будет незаметно завершен ошибкой.

Обращаю Ваше внимание, что функция $.getJSON() является сокращенной версией функции $.ajax() со следующими параметрами:

$.ajax({
  dataType: "json", // расценивает ответ как JSON и возвращает объект JavaScript	
  url: "url", // строка, содержащая URL адрес, на который отправляется запрос
  data: data, // данные, которые будут отправлены на сервер
  success: success // функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно
});

Начиная с версии jQuery 1.5, функция обратного вызова success получает jqXHR объект (до версии jQuery 1.5 объект XMLHttpRequest).Поскольку JSONP и кроссдоменные GET запросы не используют XMLHttpRequest, то в этих случаях параметры функции обратного вызова success jqXHR и textStatus не будут определены (undefined).

jQuery синтаксис:

Синтаксис 1.0:
$.getJSON( url, data, success );

url - String
data - PlainObject, или String 
success - Function( PlainObject data, String textStatus, jqXHR jqXHR )

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

1.0

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование метода .getJSON()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function() {
	  $( "button" ).click(function() { // задаем функцию при нажатиии на элемент <button>
	    $.getJSON( "test.json", function ( data, textStatus, jqXHR ) { // указываем url и функцию обратного вызова
	      var out = ""; // создаем пустую строковую переменную
	      for ( key in data ) { // создаем цикл for in
		out += ( key + ": " + data[key] + "<br>"); // добавляем в переменную все ключи объекта и их значения
	      };
	      $( "div" ).html( out ); // добавляем в элемент <div> значение переменной
	    })
	  })
	});
		</script>
	</head>
	<body>
		<button>About</button>
		<div></div>
	</body>
</html>

В этом примере с использованием jQuery функции $.getJSON() мы при нажатии на элемент <button> (кнопка) с использованием AJAX запроса загружаем закодированные в формате JSON данные с сервера. Загружаемый файл ("test.json") имеет следующее содержимое:

{
	"firstName": "Борис",
	"lastName": "Бритва",
	"age": 25,
	"phone": 88005553535
}

Кроме того, мы в качестве параметра функции $.getJSON() задаем функцию обратного вызова, которая вызывается если AJAX запрос выполнится успешно, она используя цикл for...in добавляет в ранее созданную переменную все ключи объекта и их значения. После этого, используя jQuery метод .html() добавляет содержимое переменной в элемент <div>.

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

Пример использования jQuery метода .getJSON(). — Пример использования jQuery метода .getJSON()

jQuery AJAX