Помимо применения JavaScript для извлечения файла JSON через HTTP, вы также можете сделать это с помощью библиотеки JavaScript, такой как jQuery.
Вот пример того, как можно использовать jQuery для извлечения JSON-файла через HTTP, а затем его вывода на веб-странице. Здесь мы опять воспользуемся файлом artist.txt, который содержит следующие данные.
{
"artists" : [
{
"artistname" : "Leonard Cohen",
"born" : "1934"
},
{
"artistname" : "Joe Satriani",
"born" : "1956"
},
{
"artistname" : "Snoop Dogg",
"born" : "1971"
}
]
}
А вот код jQuery, который загрузит JSON-файл, отформатирует его содержимое с помощью тегов HTML, а затем отобразит результат.
<!doctype html>
<title>Пример</title>
<!-- Загружаем jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Загружаем JSON-файл и выводим его -->
<script>
$(function() {
// Пользователь щёлкнул по кнопке getData
$("#getData").click(function() {
// Сохраняем элемент artistList и адрес JSON-файла в переменных
var artistList = $("#artistList");
var url = "/example/artist.txt";
// Получаем JSON-файл
$.getJSON(url, function(data) {
// Вставляем исполнителей в переменную
var artists = data.artists.map(function(item) {
return item.artistname + " (" + item.born + ")";
});
// Удаляем все дочерние узлы (включая текстовые)
artistList.empty();
// Форматируем исполнителей через теги HTML
if (artists.length) {
var content = "<li>" + artists.join("</li><li>") + "</li>";
var list = $("<ul>").html(content);
artistList.append(list);
}
});
});
});
</script>
<!-- Показываем результаты здесь -->
<button id="getData">Показать исполнителей</button>
<div id="artistList"></div>
Метод $.ajax()
В jQuery также есть метод $.ajax(), который можно использовать вместо метода $.getJSON(). Метод $.ajax() применяется для выполнения асинхронного HTTP-запроса (AJAX). Разница в том, что $.ajax() предназначен не только для запросов JSON, он может использоваться и для запросов других типов, таких как XML, скрипты, HTML и даже запросы в виде простого текста.
Это работает так.
$.ajax({
url: "/json/tutorial/artists.json",
dataType: "json",
success: function (data) {
// Обрабатывайте данные JSON здесь
}
});
Метод $.ajax() содержит множество параметров для настройки HTTP-запроса. Всё это объясняется в документации по jQuery API.