Как сделать вызов JSON с помощью jQuery?

Опубликовано: 4 Января, 2023

Используйте функцию getJSON() в jQuery для загрузки данных JSON. Функция getJSON() использует HTTP-запрос GET для получения данных в формате JSON с сервера. В этой статье мы узнаем о функции jQuery getJSON() и ее реализации на примерах.

Синтаксис:

$(selector).getJSON(url, data, success(data, status, xhr))

Параметры: этот метод принимает три аргумента, которые перечислены ниже:

URL-адрес: необходим URL-адрес аргумента. Он используется для указания URL-адреса в виде строки, на которую отправляется запрос.
data: это необязательный параметр, который указывает данные, которые будут переданы на сервер.
обратный вызов: это также необязательный аргумент, который выполняется в случае успешного выполнения запроса.

Возвращаемое значение: возвращает объект XMLHttpRequest.

Пример 1. В этом примере мы используем функцию getJSON() для извлечения данных JSON из внешнего файла JSON. Существует внешний файл JSON с именем emp.json , в котором содержится информация о сотруднике.

URL-адрес и функция обратного вызова — это два аргумента используемого нами метода getJSON(). Он извлекает данные в формате JSON с сервера с помощью HTTP-запроса GET. Для параметра URL установлено значение emp.json . Функция обратного вызова имеет два параметра data и status . Первый аргумент содержит содержимое запрошенной страницы, а второй — статус запроса. Загрузка данных с сервера видна в выводе, а статус запроса — успех .

Чтобы получить данные из внешнего файла JSON, мы должны нажать данную кнопку.

эмп.json:

{
    "name": "Vishal Kumar", 
    "age" : "22", 
    "gender": "Male",
    "salary": 56000 
}

Пример:

Выход:

Пример 2. В следующем примере используется метод getJSON() для загрузки случайных котировок из API Formastic .

Всякий раз, когда пользователь нажимает на данную кнопку, делается запрос к серверу API. При успешном получении данных с сервера они переходят к готовому интерфейсу, который содержит функцию обратного вызова с одним параметром, называемым quote . Этот параметр содержит данные запрошенной страницы.

Если возникает ошибка при получении данных, то они переходят к функции обратного вызова с ошибкой , имеющей один параметр с именем err . Этот параметр содержит сообщение об ошибке, возвращенное сервером, которое вы можете зарегистрировать и попытаться решить.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  
    <style>
        body {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
  
        #quote {
            background-color: #25bf1a;
        }
    </style>
</head>
  
<body>
    <h2 style="color:green;">
        GeeksforGeeks
    </h2>
      
    <p>Click on the button to call API</p>
      
    <div id="quote"></div>
      
    <input type="button" id="btn" value="Call API" />
  
    <script>
        $(document).ready(function () {
            var forismaticAPI =
"http:.../api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";
            $("#btn").click(function () {
                $.getJSON(forismaticAPI)
                    .done(function (quote) {
                        $("#quote").html("<p> quoteText: " 
                            + quote.quoteText + "</p>");
                        $("#quote").append("<p>quoteAuthor : "
                            + quote.quoteAuthor + "</p>"
                        );
                        $("#quote").append("<p>senderName: " 
                            + quote.senderName + "</p>");
                        $("#quote").append("<p>senderLink: " 
                            + quote.senderLink + "</p>");
                        $("#quote").append("<p>quoteLink: " 
                            + quote.quoteLink + "</p>");
                    })
                    .fail(function (err) {
                        console.log(err);
                    });
            });
        });
    </script>
</body>
  
</html>

Выход:

JQuery Picked

Как сделать вызов JSON с помощью jQuery?

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ