jQuery_jqueryでjsonデータを非同期で取得する2つの方法

この記事の例では、jQuery が json データを非同期で取得する 2 つの方法について説明します。これは、Web プログラム開発において非常に実用的です。皆さんの参考に共有してください。具体的な方法は以下の通りです。

一般に、jQuery が json データを非同期的に取得するには 2 つの方法があります。1 つは $.getJSON メソッドで、もう 1 つは $.ajax メソッドです。この記事では、これら 2 つの方法を使用して json データを非同期に取得し、ページに追加します。

ルート ディレクトリに data.json ファイルを作成します:

{
  "one" : "Hello",
  "two" : "World"
}

1. $.getJSON メソッドを通じて json データを取得します

  <script src="Scripts/jquery-2.1.1.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $.getJSON('data.json', function(data) {
        var items = [];
        $.each(data, function(key, val) {
          items.push('<li id="' + key + '">' + val + '</li>');
        });
        $('<ul/>', {
          'class': 'list',
          html: items.join('')
        }).appendTo('body');
      });
    });
  </script>

2. $.ajax メソッドで json データを取得します

  <script src="Scripts/jquery-2.1.1.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $.ajax({
        url: 'data.json',
        dataType: 'json',
        success: function(data) {
          var items = [];
          $.each(data, function(key, val) {
            items.push('<li id="' + key + '">' + val + '</li>');
          });
          $('<ul/>', {
            'class': 'list',
            html: items.join('')
          }).appendTo('body');
        },
        statusCode: {
          404: function() {
            alert("没有找到相关文件~~");
          }
        }
      });
    });
  </script>

概要: $.getJSON メソッドと $.ajax メソッドを使用しても同じ効果を実現できますが、非同期取得プロセスをより詳細に制御したい場合は、$.ajax メソッドを使用することをお勧めします。アヤックスメソッド。

この記事で説明されている内容は、皆さんの jQuery プログラミングにとって一定の参考になると思います。