ホームページ  >  記事  >  ウェブフロントエンド  >  Ajaxを利用してjQuery_jqueryでJSON形式のデータを取得するサンプルコード

Ajaxを利用してjQuery_jqueryでJSON形式のデータを取得するサンプルコード

WBOY
WBOYオリジナル
2016-05-16 17:12:20980ブラウズ

JSON (JavaScript Object Notation) は軽量のデータ交換形式です。 JSONM ファイルには、「名前」と「値」に関する情報が含まれています。場合によっては、JSON 形式でデータ ファイルを読み取る必要があることがあります。これは、Ajax または jQuery の $.getJSON() メソッドを使用して実現できます。

以下では、jQuery を使用して music.txt ファイル内の JSON データ形式情報を読み取ります。
まず、music.txt の内容は次のとおりです:

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

[
{"optionKey":"1", "optionValue":"D のカノン"},
{"optionKey":"2", "optionValue":"風の歌"},
{"optionKey":"3", "optionValue":"Wings"}
]

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

ボタンをクリックして JSON データを取得します



Ajax を使用して JSON データを取得するための jQuery コード:


$(document).ready(function(){
$ ('#button').click(function(){
$.ajax({
type: "GET",
url : "music.txt",
dataType: "json",
success:function(data){
var music="
    ";
    //i はインデックス位置を表します。 data、n は情報を含むオブジェクトを表します
    $.each (data,function(i,n){
    //属性が optionsValue
    music ="
  • であるオブジェクトの値を取得します。 " n["optionValue"] "
  • ";
    });
    music ="
";
$('#result').append(music);
}
});
return
})
});


もちろん、$.getJSON() も使用できます。


$( document).ready(function(){
$('#button').click(function( ){
$.getJSON('music.txt',function(data){
var music= "
    ";
    $.each(data,function(i,n){
    music ="
  • " n["optionValue"] "
  • ";
    });
    music ="
";
$('# result').append(music);
return
}) ;
});
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。