Окрім застосування JavaScript для вилучення файлу JSON через HTTP, ви також можете зробити це за допомогою бібліотеки JavaScript, такої як jQuery.
Ось приклад того, як можна використовувати jQuery для вилучення JSON-файлу через HTTP, а потім його виведення на веб-сторінці. Тут ми знову скористаємося файлом artist.txt, який містить такі дані.
<code data-language="javascript">{ "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(); (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 і навіть запити у вигляді простого тексту.
Це працює так.
<code data-language="javascript">$.ajax({ url: "/json/tutorial/artists.json", dataType: "json", success: function (data) { //Обробляйте дані JSON тут }
});Метод $.ajax() містить безліч параметрів для налаштування запиту HTTP. Все це пояснюється в документації з jQuery API.