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
}) ;
});
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
