Bagaimanakah Saya Boleh Mengulang Melalui dan Memaparkan Data JSON Menggunakan jQuery?

Menghuraikan Data JSON dengan jQuery / JavaScript

Apabila bekerja dengan perkhidmatan web atau API, adalah perkara biasa untuk menerima data JSON. Menghuraikan data ini ke dalam format yang boleh digunakan adalah perlu untuk memaparkan dan memanipulasi data pada halaman web anda.

Pernyataan Masalah:
Pertimbangkan panggilan AJAX berikut yang mengembalikan data JSON:

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

Data JSON yang diambil dalam div #cand kelihatan seperti ini:

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

Timbul persoalan: bagaimanakah kita boleh mengulangi data JSON ini dan memaparkan setiap nama dalam div yang berasingan?

Penyelesaian:
Kepada menghuraikan data JSON dengan betul, kita perlu memastikan bahawa skrip sebelah pelayan menetapkan pengepala respons Jenis Kandungan: aplikasi/json yang betul. Untuk jQuery mengenali data sebagai JSON, kita perlu menentukan dataType: 'json' dalam panggilan AJAX.

Setelah kami mempunyai jenis data yang betul, kami boleh menggunakan fungsi $.each() untuk melelaran melalui data:

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

Sebagai alternatif, anda boleh menggunakan kaedah $.getJSON() untuk lebih ringkas pendekatan:

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

Ini akan mencipta div baharu untuk setiap nama dalam data JSON dan memaparkannya pada halaman web.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengulang Melalui dan Memaparkan Data JSON Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!