jquery 구문 분석 json data_jquery에 대한 심층 분석-JS 튜토리얼-php.cn

jquery 구문 분석 json data_jquery에 대한 심층 분석

WBOY

풀어 주다： 2016-05-16 16:28:09

원래의

1275명이 탐색했습니다.

먼저 위 예시의 comments 객체를 파싱하는 JSON 데이터를 예로 들고, jQuery에서 JSON 데이터를 파싱하는 방법을 정리해보겠습니다.

JSON 데이터는 다음과 같으며 중첩된 JSON입니다.

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

{"comments":[{"content":"매우 좋음","id":1,"nickname":"Nani"},{"content":"Yoshiyoshi","id":2 ,"nickname": "샤오치앙"}]}

JSON 데이터를 얻으려면 jQuery에 $.getJSON()이라는 간단한 메소드가 있습니다.

다음은 $.getJSON()의 공식 API 설명입니다.

jQuery.getJSON( url, [data,] [success(data, textStatus, jqXHR)] )

url요청이 전송되는 URL이 포함된 문자열입니다.

data요청과 함께 서버로 전송되는 맵 또는 문자열입니다.

success(data, textStatus, jqXHR)요청이 성공하면 실행되는 콜백 함수

콜백 함수는 세 가지 매개변수를 받습니다. 첫 번째는 반환된 데이터, 두 번째는 상태, 세 번째는 jQuery의 XMLHttpRequest입니다.

$.each()는 콜백 함수에서 JSON 데이터를 파싱하는 데 사용되는 메서드입니다. 공식 문서는 다음과 같습니다.

jQuery.each( collection, callback(indexInArray, valueOfElement) )

collection반복할 객체 또는 배열입니다.

callback(indexInArray, valueOfElement)모든 객체에 대해 실행될 함수

$.each() 메서드는 두 개의 매개 변수를 허용합니다. 첫 번째는 탐색해야 하는 개체 컬렉션(JSON 개체 컬렉션)입니다. 두 번째는 두 개의 매개 변수를 허용하는 메서드입니다. 순회된 인덱스이고 두 번째는 현재 순회된 값입니다. 하하, $.each() 메소드를 사용하면 JSON 구문 분석이 쉽게 해결됩니다. (*^__^*) 히히...

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

함수 loadInfo() {
$.getJSON("loadInfo", 함수(데이터) {
> > $ $("#info").append(
"

" 항목.id "

" "

" item.nickname "

" item.content "

");
});
});
}

위와 같이 loadinfo는 요청된 주소이고, function(data){...}는 요청 성공 후의 콜백 함수이며, data는 반환된 JSON 개체를 다음 $.each(data.comments,function에 캡슐화합니다. (i,item){...}) 메서드의 data.comments는 JSON 데이터에 포함된 JSON 배열에 직접 도달합니다.

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

[{"content":"매우 좋음","id":1,"nickname":"Nani"},{"content":"Yoshiyoshi","id":2,"nickname": "Xiaoqiang"}]

$.each() 메소드의 함수는 이 배열을 순회한 후 DOM을 연산하여 적절한 위치에 삽입하는 것입니다. 순회 프로세스 중에 현재 순회 인덱스(코드의 "i")와 현재 순회 값(코드의 "item")에 쉽게 액세스할 수 있습니다.

위 예시의 결과는 다음과 같습니다.

반환된 JSON 데이터가 더 복잡하다면 더 많은 $.each()를 사용하여 탐색하세요. 예를 들어 다음 JSON 데이터는 다음과 같습니다.

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

{"comments":[{"content":"매우 좋음","id":1,"nickname":"Nani"},{"content":"Yoshiyoshi","id":2 ,"nickname": "샤오치앙"}],

"content":"바보 같군요, 하하.","infomap":{"성별":"남성","직업":"프로그래머",

"블로그":"http://www.xxx.com/codeplus/"},"title":"123 Wooden Man"}

js는 다음과 같습니다.

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

함수 loadInfo() {

$.getJSON("loadInfo", 함수(데이터) {

           $("#title").append(data.title "");

           $("#content").append(data.content "");

//jquery가 지도 데이터를 구문 분석합니다

          $.each(data.infomap,function(키,값){

$("#mapinfo").append(키 "----" 값 "
");

        });

//배열 구문 분석

          $.each(data.comments, 함수(i, 항목) {

                $("#info").append(

"" 항목.id "
"
"" 항목.닉네임 "
"
"" item.content "
");

        });

        });

}

$.each()가 Map을 순회할 때 function()의 매개변수가 키와 값이므로 매우 편리하다는 점은 주목할 가치가 있습니다.