jQuery를 사용하여 JSON 데이터를 구문 분석하는 예제 튜토리얼

이전 글에서 Struts2의 Ajax 개발 예제에 대한 예비 분석에서는 comments 객체의 JSON 데이터를 얻었습니다. 이번 글에서는 데이터 분석을 위해 jquery를 사용하겠습니다.

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

위 예제에서 얻은 JSON 데이터는 다음과 같습니다. 중첩된 JSON입니다.

{“comments”:[{“content”:”很不错嘛”,”id”:1,”nickname”:”纳尼”},{“content”:”哟西哟西”,”id”:2,”nickname”:”小强”}]}

JSON 데이터를 얻으려면 jQuery에서 구현할 수 있는 간단한 $.getJSON() 메서드가 있습니다.

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

jQuery.getJSON( url, [data,] [success(data, textStatus, jqXHR)] )
urlA string containing the URL to which the request is sent.
dataA map or string that is sent to the server with the request.
success(data, textStatus, jqXHR)A callback function that is executed if the request succeeds.

콜백 함수 는 세 가지 매개변수를 허용합니다. 첫 번째는 반환된 데이터이고 두 번째는 status이며 세 가지 매개변수는 다음과 같습니다. jQuery의 XMLHttpRequest이므로 첫 번째 매개변수만 사용합니다.

$.each()는 콜백 함수에서 JSON 데이터를 구문 분석하는 데 사용되는 메서드입니다. 다음은 공식 문서입니다.

jQuery.each( collection, callback(indexInArray, valueOfElement) )
collectionThe object or array to iterate over.
callback(indexInArray, valueOfElement)The function that will be executed on every object.

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

function loadInfo() {
$.getJSON(“loadInfo”, function(data) {
$(“#info”).html(“”);//清空info内容
$.each(data.comments, function(i, item) {
$(“#info”).append(
“<p>” + item.id + “</p>” +
“<p>” + item.nickname    + “</p>” +
“<p>” + item.content + “</p><hr/>”);
});
});
}

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

[{“content”:”很不错嘛”,”id”:1,”nickname”:”纳尼”},{“content”:”哟西哟西”,”id”:2,”nickname”:”小强”}]

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

위 예제의 실행 결과는 다음과 같습니다.

반환된 JSON 데이터가 더 복잡하다면 순회하려면 더 많은 $.each()만 필요합니다. 예를 들어, 다음 JSON 데이터는 다음과 같습니다.

{“comments”:[{“content”:”很不错嘛”,”id”:1,”nickname”:”纳尼”},{“content”:”哟西哟西”,”id”:2,”nickname”:”小强”}],
“content”:”你是木头人，哈哈。”,”infomap”:{“性别”:”男”,”职业”:”程序员”,”博客”:”http:////www.cnblogs.com//codeplus//”},”title”:”123木头人”}
JS如下：
function loadInfo() {$.getJSON(“loadInfo”, function(data) {
$(“#title”).append(data.title+”<hr/>”);$(“#content”).append(data.content+”<hr/>”);//jquery解析map数据$.each(data.infomap,function(key,value){$(“#mapinfo”).append(key+”—-”+value+”<br/><hr/>”);});//解析数组$.each(data.comments, function(i, item) {$(“#info”).append(“<p>” + item.id + “</p>” +“<p>” + item.nickname    + “</p>” +“<p>” + item.content + “</p><hr/>”);});});}

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

위 내용은 jQuery를 사용하여 JSON 데이터를 구문 분석하는 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!