Функция $.getJSON()

Функция $.getJSON() позволяет получить данные в форматах JSON и JSONP. Запрос отправляется методом GET. Формат функции:

<jqXHR> = $.getJSON(<URL>[, <Данные>][, <Функция обратного вызова>])

Необязательный параметр <Данные> позволяет указать строку с закодированными данными, которая будет добавлена к URL после символа вопроса (содержимое файла ajax.php см. в листинге 3.11):

$.getJSON('/ajax.php', 'txt1=1&txt2=2', function(json) {
   $('#div_ajax').html(json.txt1 + '<br>' + json.txt2);
});

Можно также передать несколько параметров в виде объекта. В этом случае параметры и значения должны быть указаны следующим образом:

{
   Параметр1: "Значение1",
   Параметр2: "Значение2",
   ...
   ПараметрN: "ЗначениеN"
}

Пример:

$.getJSON('/ajax.php', {txt1: '1', txt2: '2'}, function(json) {
   $('#div_ajax').html(json.txt1 + '<br>' + json.txt2);
});

В качестве параметра <Функция обратного вызова> указывается ссылка на функцию следующего формата:

function <Название функции>(<JSON-объект>[, <Статус>[, 
                            <Объект jqXHR>]]) {
   // ...
}

Функция будет вызвана после окончания загрузки в случае успешного результата. Внутри функции обратного вызова доступен указатель this на объект с параметрами запроса. Если в первом параметре указать переменную, то через нее будет доступен обработанный JSON-объект на основе данных, загруженных с сервера. Через параметр <Статус> доступен статус запроса (значение success — при успешном выполнении), а через параметр <Объект jqXHR> доступна ссылка на объект, имитирующий объект XMLHttpRequest.

Функция $.getJSON() возвращает ссылку на объект jqXHR. Обработать ошибку загрузки можно с помощью метода fail() объекта jqXHR:

$.getJSON('/ajax2.php', {txt1: '1', txt2: '2'}, function(json) {
   $('#div_ajax').html(json.txt1 + '<br>' + json.txt2);
}).fail( function( xhr, status, error ) {
   $('#div_ajax').text('Ошибка: ' + error);
});

Рассмотрим использование функции $.getJSON() на примере. Создадим документ с формой (листинг 3.20), который будет обмениваться данными с файлом ajax.php (см. листинг 3.11).

Листинг 3.20. Функция $.getJSON()

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>Функция $.getJSON()</title>
</head>
<body>
<div class="container my-3">
  <form action="ajax.php" method="GET" onsubmit="return false;">
    <div class="form-group">
      <input type="text" class="form-control" id="txt1">
    </div>
    <div class="form-group">
      <input type="text" class="form-control" id="txt2">
    </div>
    <button type="button" class="btn btn-primary"
            id="btnSend">Отправить</button>
  </form>
</div>
<div class="container my-3">
   <div id="div_ajax"></div>
</div>

<script src="/js/jquery.min.js"></script>
<script>
$('#btnSend').click( function() {
   // Отправка запроса методом GET
   var txt1 = $('#txt1').val();
   var txt2 = $('#txt2').val();
   if (txt1 === '' || txt2 === '') {
      window.alert('Не заполнено поле');
      return;
   }
   $('#div_ajax').text('Загрузка...');
   $.getJSON('/ajax.php', { txt1: txt1, txt2: txt2 },
      function(json, status, xhr) {
         $('#div_ajax').html(json.txt1 + '<br>' + json.txt2);
         $('#txt1, #txt2').val('');
   }).fail( function( xhr, status, error ) {
      $('#div_ajax').text('Ошибка: ' + error);
   });
});
</script>
</body>
</html>

Функция $.getJSON() позволяет также получать данные в формате JSONP с другого домена. Чтобы отправить данные этим способом, необходимо после параметров в URL-адресе указать конструкцию:

<Параметр>=?

Название параметра может быть произвольным:

http://site1/ajax.php?txt=test&callback=?

Если в конце запроса указан вопросительный знак, то данные будут отправлены не с помощью технологии AJAX, а путем создания тега <script> с указанием URL-адреса в параметре src. Вместо вопросительного знака будет вставлено произвольное значение. Запрос на сервер будет выглядеть примерно следующим образом:

http://site1/ajax.php?txt=test&callback=jQuery341041636825067330563_1590512642652&_=1590512642653

Как видно из результата, вместо знака вопроса мы получили следующую строку:

jQuery341041636825067330563_1590512642652&_=1590512642653

Значение параметра callback необходимо указать перед данными в виде объекта в скрипте на сервере. Сами данные указываются внутри круглых скобок. Это соответствует вызову функции и передаче объекта с данными в качестве параметра:

jQuery341041636825067330563_1590512642652({
   txt1: "Значение 1",
   txt2: "Значение 2"
});

В качестве примера рассмотрим получение данных в формате JSONP с другого домена. Создадим документ с формой http://localhost/test.html (листинг 3.21), который будет обмениваться данными с файлом http://site1/ajax.php (листинг 3.22).

Листинг 3.21. Содержимое файла http://localhost/test.html

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>Функция $.getJSON() и JSONP</title>
</head>
<body>
<div class="container my-3">
  <form action="ajax.php" method="GET" onsubmit="return false;">
    <div class="form-group">
      <input type="text" class="form-control" id="txt1">
    </div>
    <div class="form-group">
      <input type="text" class="form-control" id="txt2">
    </div>
    <button type="button" class="btn btn-primary"
            id="btnSend">Отправить</button>
  </form>
</div>
<div class="container my-3">
   <div id="div_ajax"></div>
</div>

<script src="/js/jquery.min.js"></script>
<script>
$('#btnSend').click( function() {
   var txt1 = $('#txt1').val();
   var txt2 = $('#txt2').val();
   if (txt1 === '' || txt2 === '') {
      window.alert('Не заполнено поле');
      return;
   }
   $('#div_ajax').text('Загрузка...');
   var url = 'http://site1/ajax.php?txt1=' + encodeURIComponent(txt1);
   url += '&txt2=' + encodeURIComponent(txt2) + '&callback=?';
   $.getJSON(url, function(obj) {
      $('#div_ajax').html(obj.txt1 + '<br>' + obj.txt2);
      $('#txt1, #txt2').val('');
   }).fail( function(xhr, status, error) {
      $('#div_ajax').text('Ошибка: ' + error);
   });
});
</script>
</body>
</html>

Листинг 3.22. Содержимое файла http://site1/ajax.php

<?php
// Указываем MIME-тип и кодировку
header('Content-Type: text/javascript; charset=utf-8');
if ( !isset($_GET['callback']) || !isset($_GET['txt1']) || 
     !isset($_GET['txt2']) ) {
   exit('Некорректные параметры запроса');
}
$txt1 = addslashes($_GET['txt1']);
$txt2 = addslashes($_GET['txt2']);
echo $_GET['callback']; ?>({
   txt1: "<?=$txt1?>",
   txt2: "<?=$txt2?>"
});

Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов