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

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

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

Следует учитывать, что при использовании формата JSON данные можно загрузить только с того же домена. Необязательный параметр <Данные> позволяет передать несколько параметров. Для этого параметры и значения должны быть указаны следующим образом.

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

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

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

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

В качестве примера рассмотрим получение данных в формате JSON. Создадим файл index.php (листинг 11.4), который будет обмениваться данными с файлом ajax.php (листинг 11.5), расположенным на том же домене.

Листинг 11.4. Содержимое файла index.php

<!doctype html>
<html>
<head>
<title>Функция $.getJSON() и JSON</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $(":button").click(function() {
      $.getJSON("/ajax.php", { txt: "test" },
         function(jsonObject) {
            $("#div1").html("param1 = " + jsonObject.param1 + 
               "<br>" + "param2 = " + jsonObject.param2);
         }
      );
   });
});
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value="Получить данные">
</body>
</html>

Листинг 11.5. Содержимое файла ajax.php

<?php
header('Expires: Sun, 27 May 2007 01:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Type: text/javascript; charset=utf-8');
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
   exit('Данные отправлены не через AJAX');
}
if (!isset($_GET['txt'])) {
   exit('Некорректные параметры запроса');
}
?>
{
param1: "Значение 1",
param2: "<?php echo $_GET['txt']; ?>"
}

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

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

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

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

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

GET /ajax.php?txt=test&callback=jsonp1247518622796&_=1247518624156 
HTTP/1.1
Host: site1

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

jsonp1247518622796&_=1247518624156

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

jsonp1247518622796({
param1: "Значение 1",
param2: "Значение 2"
});

В качестве примера рассмотрим получение данных в формате JSONP с другого домена. Создадим файл index.php (листинг 11.6) и разместим его на домене http://localhost/. С помощью этого файла будем обмениваться данными со скриптом ajax.php (листинг 11.7), расположенным на домене http://site1/.

Листинг 11.6. Содержимое файла http://localhost/index.php

<!doctype html>
<html>
<head>
<title>Функция $.getJSON() и JSONP</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $(":button").click(function() {
      $.getJSON("http://site1/ajax.php?txt=test&callback=?", 
         function(jsonObject) {
            $("#div1").html("param1 = " + jsonObject.param1 + 
               "<br>" + "param2 = " + jsonObject.param2);
         }
      );
   });
});
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value="Получить данные">
</body>
</html>

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

<?php
header('Content-Type: text/javascript; charset=utf-8');
if (!isset($_GET['callback'])) {
   exit('Некорректные параметры запроса');
}
echo $_GET['callback']; ?>({
param1: "Данные с другого домена",
param2: "<?php echo $_GET['txt']; ?>"
});

Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

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

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

Помощь сайту

Поиск по сайту в Яндексе