ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery を使用して JSON データを効率的に解析して表示するにはどうすればよいですか?

jQuery を使用して JSON データを効率的に解析して表示するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-12-11 11:31:14
オリジナル
765 人が閲覧しました

How Can I Efficiently Parse and Display JSON Data Using jQuery?

jQuery と JavaScript を使用した JSON データの解析

JavaScript での JSON データの解析は、サーバー側呼び出しからの応答を処理するために不可欠です。 jQuery を使用して JSON データを効率的に抽出して処理する方法を見てみましょう。

問題:

次の形式で JSON データを返す AJAX リクエストがあります:

[
  { "id": "1", "name": "test1" },
  { "id": "2", "name": "test2" },
  ...
  { "id": "5", "name": "test5" }
]
ログイン後にコピー

ID が cand の div 内で、名前を表示したいとします。目標は、名前ごとに個別の div を作成し、それに対応する値を設定することです。

解決策:

JSON 応答を処理するには、dataType を使用できます。 AJAX リクエストの「json」パラメータは、jQuery に適切な応答タイプを示します。

$.ajax({
  type: 'GET',
  url: 'http://example/functions.php',
  data: { get_param: 'value' },
  dataType: 'json',
  success: function(data) {
    $.each(data, function(index, element) {
      $('#cand').append($('<div>', {
        text: element.name
      }));
    });
  }
});
ログイン後にコピー

別のオプションは次のとおりです。 $.getJSON メソッドを使用するには:

$.getJSON('/functions.php', { get_param: 'value' }, function(data) {
  $.each(data, function(index, element) {
    $('#cand').append($('<div>', {
      text: element.name
    }));
  });
});
ログイン後にコピー

このメソッドは JSON 応答を自動的に解析します。

提供されたソリューションを活用することで、JavaScript アプリケーションで JSON データを簡単に抽出してフォーマットできます。 .

以上がjQuery を使用して JSON データを効率的に解析して表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート