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

WBOY
풀어 주다: 2016-05-16 17:12:20
원래의
994명이 탐색했습니다.

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿