Wie kann ich JSON-Daten mit jQuery durchlaufen und anzeigen?

JSON-Daten mit jQuery/JavaScript analysieren

Bei der Arbeit mit Webdiensten oder APIs ist es üblich, JSON-Daten zu empfangen. Das Parsen dieser Daten in ein verwendbares Format ist für die Anzeige und Bearbeitung der Daten auf Ihrer Webseite erforderlich.

Problemstellung:
Betrachten Sie den folgenden AJAX-Aufruf, der JSON-Daten zurückgibt:

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

Die im #cand div abgerufenen JSON-Daten sehen folgendermaßen aus Dies:

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

Es stellt sich die Frage: Wie können wir diese JSON-Daten durchlaufen und jeden Namen in einem separaten Div anzeigen?

Lösung:
An Um JSON-Daten korrekt zu analysieren, müssen wir sicherstellen, dass das serverseitige Skript den richtigen Content-Type: application/json-Antwortheader festlegt. Damit jQuery die Daten als JSON erkennt, müssen wir dataType: 'json' im AJAX-Aufruf angeben.

Sobald wir den richtigen Datentyp haben, können wir die Funktion $.each() zum Durchlaufen verwenden die Daten:

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

Alternativ können Sie die Methode $.getJSON() für eine prägnantere Darstellung verwenden Ansatz:

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

Dadurch wird für jeden Namen in den JSON-Daten ein neues Div erstellt und auf der Webseite angezeigt.

Das obige ist der detaillierte Inhalt vonWie kann ich JSON-Daten mit jQuery durchlaufen und anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!