Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Функция $.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?>"
});
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов