json data_jqueryを取得するjQuery非同期メソッドのまとめ

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

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

コードをコピーします コードは次のとおりです:

{
"one" : "こんにちは"、
"two" : "世界"
}

■ $.getJSON メソッドで json データを取得

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(function() {
$.getJSON('data.json', function(data) {
var items = [];
$.each(data, function(key, val) {
items.push('

' val '

');
});
$('

', {
'クラス': 'リスト',
html: items.join('')
}).appendTo('body');
});
});

■ $.ajax メソッドで json データを取得

コードをコピー コードは次のとおりです:

   
    <スクリプトタイプ="text/javascript">
        $(function() {
            $.ajax({
                URL: 'data.json',
                データ型: 'json',
                成功: 関数(データ) {
                    var items = [];
                    $.each(data, function(key, val) {
                        items.push('

' val '

');
                    });
                    $('

', {
                        'クラス': 'リスト',
                        html: items.join('')
                    }).appendTo('body');
                }、
                ステータスコード: {
                    404: 関数() {
                        alert("没有找到関連文件~~");
                    }
                }
            });
        });
   

全体: $.getJSON メソッドと $.ajax メソッドの両方を使用しても同じ効果が得られますが、より厳密な制御が必要な場合は、$.ajax メソッドを使用することをお勧めします。