Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Функция $.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
Скриншот реквизитов