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

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

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

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

jQuery синтаксис:

JavaScript
Синтаксис 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).

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

HTML
<!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("person.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 данные с сервера. Загружаемый файл ("person.json") имеет следующее содержимое:

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

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


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

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

index.html
HTML

  
  <button>About</button>
  <div></div>
main.js
JavaScript
$(document).ready(function () {
  $("button").click(function () {
    $.getJSON("person.json", function (data, textStatus, jqXHR) {
      var out = "";
      for (key in data) {
        out += key + ": " + data[key] + "<br>";
      }
      $("div").html(out);
    });
  });
});

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

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