jQuery를 사용하여 JSON 데이터를 반복하고 표시하려면 어떻게 해야 합니까?

jQuery/JavaScript로 JSON 데이터 파싱

웹 서비스나 API로 작업할 때 JSON 데이터를 받는 것이 일반적입니다. 웹 페이지의 데이터를 표시하고 조작하려면 이 데이터를 사용 가능한 형식으로 구문 분석하는 것이 필요합니다.

문제 설명:
JSON 데이터를 반환하는 다음 AJAX 호출을 고려하세요.

$(document).ready(function () {
    $.ajax({
        type: 'GET',
        url: 'http://example/functions.php',
        data: { get_param: 'value' },
        success: function (data) {
            var names = data;
            $('#cand').html(data);
        }
    });
});

#cand div에서 검색된 JSON 데이터는 다음과 같습니다. 이:

[
    { "id": "1", "name": "test1" },
    { "id": "2", "name": "test2" },
    { "id": "3", "name": "test3" },
    { "id": "4", "name": "test4" },
    { "id": "5", "name": "test5" }
]

질문이 생깁니다. 어떻게 이 JSON 데이터를 반복하고 각 이름을 별도의 div에 표시할 수 있습니까?

해결책:
To JSON 데이터를 올바르게 구문 분석하려면 서버 측 스크립트가 적절한 Content-Type: application/json 응답 헤더를 설정하는지 확인해야 합니다. jQuery가 데이터를 JSON으로 인식하려면 AJAX 호출에서 dataType: 'json'을 지정해야 합니다.

올바른 데이터 유형이 있으면 $.each() 함수를 사용하여 반복할 수 있습니다. 데이터:

$.ajax({
    type: 'GET',
    url: 'http://example/functions.php',
    data: { get_param: 'value' },
    dataType: 'json',
    success: function (data) {
        $.each(data, function (index, element) {
            $('body').append($('<div>', {
                text: element.name
            }));
        });
    }
});

또는 $.getJSON() 메서드를 사용하여 더 간결하게 만들 수 있습니다. 접근 방식:

$.getJSON('/functions.php', { get_param: 'value' }, function (data) {
    $.each(data, function (index, element) {
        $('body').append($('<div>', {
            text: element.name
        }));
    });
});

이렇게 하면 JSON 데이터의 각 이름에 대해 새 div가 생성되어 웹페이지에 표시됩니다.

위 내용은 jQuery를 사용하여 JSON 데이터를 반복하고 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!