cpp

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

Функция $.get() позволяет сделать запрос методом GET. Имеет следующие форматы:

<jqXHR> = $.get(<URL>[, <Данные>][, <Функция обратного вызова>
                [, <Тип данных>]])
<jqXHR> = $.get(<Объект с опциями>)

Необязательный параметр <Данные> позволяет указать строку с закодированными данными, которая будет добавлена к URL после символа вопроса:

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

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

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

Пример:

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

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

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

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

Необязательный параметр <Тип данных> позволяет указать тип возвращаемых данных. Могут быть указаны значения "json", "xml", "script", "text", "html" и некоторые другие.

Второй формат функции $.get() позволяет указать объект с опциями:

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

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

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

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

Листинг 3.25. Функция $.get()

<!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>Функция $.get()</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('Загрузка...');
   $.get('/ajax.php', { txt1: txt1, txt2: txt2 },
      function(json, status, xhr) {
         $('#div_ajax').html(json.txt1 + '<br>' + json.txt2);
         $('#txt1, #txt2').val('');
   }, 'json').fail( function(xhr, status, error) {
      $('#div_ajax').text('Ошибка: ' + error);
   });
});
</script>
</body>
</html>

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

Помощь сайту

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

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

cpp