Ajax를 사용하여 jQuery_jquery에서 JSON 형식 데이터를 얻기 위한 샘플 코드

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 코드입니다.

코드 복사 코드는 다음과 같습니다.

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 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
}) ;
})