Как сделать вызов JSON с помощью jQuery?
Используйте функцию 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 > < 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 > |
Выход: