JSON(JavaScript Object Notation)은 경량 데이터 교환 형식입니다. JSONM 파일에는 "이름"과 "값"에 대한 정보가 포함되어 있습니다. 때로는 Ajax나 jQuery의 $.getJSON() 메서드를 사용하여 JSON 형식의 데이터 파일을 읽어야 하는 경우가 있습니다.
다음은 jQuery를 사용하여 music.txt 파일의 JSON 데이터 형식 정보를 읽습니다.
먼저 music.txt 내용은 다음과 같습니다.
[
{"optionKey":"1", "optionValue":"Canon in D"},
{"optionKey":"2", "optionValue":"바람 노래 "},
{"optionKey":"3", "optionValue":"Wings"}
]
다음은 HTML 코드입니다.
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 false;
})
})
물론 $.getJSON()을 사용할 수도 있습니다. 방법을 사용하면 코드가 더 간단해집니다.
$( document).ready(function(){
$('#button').click(function( ){
$.getJSON('music.txt',function(data){
var music= "
";
$.each(data,function(i,n){
music ="- " n["optionValue"] "
";
});
$('# result').append(music)
return false
}) ;
})