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

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 までご連絡ください。