如何使用 jQuery 迭代並顯示 JSON 資料？

使用 jQuery / JavaScript 解析 JSON 資料

使用 Web 服務或 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 資料如下：this:

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

問題出現了：我們如何循環遍歷這個JSON數據並在單獨的 div 中顯示每個名稱？

解決方案：
到正確解析 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中文網其他相關文章！