如何使用 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
            }));
        });
    }
});<p>或者，您可以使用 $.getJSON() 方法来更简洁方法：</p>
<pre class="brush:php;toolbar:false">$.getJSON('/functions.php', { get_param: 'value' }, function (data) {
    $.each(data, function (index, element) {
        $('body').append($('<div>', {
            text: element.name
        }));
    });
});<p>这将为 JSON 数据中的每个名称创建一个新的 div 并将其显示在网页上。</p>
</div>