Использование JSON для HTTP через jQuery

Помимо применения 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.

См. также

Автор: Йен Диксон
Последнее изменение: 27.02.2024