在 HTML 页面中显示 JSON 响应答案

【问题标题】：Displaying JSON response in an HTML page在 HTML 页面中显示 JSON 响应
【发布时间】：2020-04-20 17:27:55
【问题描述】：

我在使用 Jquery/Ajax 在我的 html 页面上显示我的 JSon 响应时遇到问题我的代码如下

JSON 响应

{
"result": [
    {
        "list_id": "3",
        "state": "yuoio",
        "zone": null,
        "name": " T. Oji",
        "phone": "082800000",
        "email": "taoji@gmail.com",
    },
    {
        "list_id": "7",
        "state": "Hu IUOM",
        "zone": null,
        "name": "Skpan",
        "phone": "05555188",
        "email": "akbert@hotmail.com",
    },

],
"Status": 200                                                                                     
}

虽然这是我的 JQuery 代码

               function  performance(){
                $.ajax({
                type  : 'GET',
                url   : 'http://localhost/senators/Api_v1/SenatorPoints',
                async : true,
                dataType : 'json',
                success : function(data){
                    var html = '';
                    var i;
                    for(i=0; i<data.length; i++){
                        html += '<div class="col-6 col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-4">'+
                                    '<a href="#" class="popular-category h-100">'+
                                                '<span>'+ '<img src="assets/images/dino.jpeg"class="img-fluid" >'+ '</span>'+
                                    '<span class="icon mb-3"><span class="flaticon-flower">'+ '</span></span>'+
                                    '<span class="caption mb-2 d-block">'+ data.result[i].name +'</span>'+
                                     '<span class="caption mb-2 d-block">'+ data.result[i].state +'</span>'+
                                    '</a>'+
                            '</div>';
                    }
                    $('#show_data').html(html);
                }
 
            });

HTML

<div id="show_data"></div>

任何帮助，数据未显示在 html 页面上。

【问题讨论】：

在for 中不应该是data.result.length 吗？一个好主意是始终调试您收到的数据...写一些console.log()，这样您就知道您收到的数据和变量...便于跟进...
这里真正的问题是“如何调试 JavaScript 代码？”这是要解决的问题，也是您应该了解的领域。除了@balexandre 提到的console.log 之外，在代码中设置断点非常有帮助，然后您可以在调试器中以交互方式查看变量。下面是Chrome DevTools和Firefox DevTools的介绍。
你的 json 好像无效

标签： jquery html json ajax

【解决方案1】：

这是我收到的响应的 json

$data = '{
"result": [
{
    "list_id": "3",
    "state": "yuoio",
    "zone": null,
    "name": " T. Oji",
    "phone": "082800000",
    "email": "taoji@gmail.com"
},
{
    "list_id": "7",
    "state": "Hu IUOM",
    "zone": null,
    "name": "Skpan",
    "phone": "05555188",
    "email": "akbert@hotmail.com"
}

],
"Status": 200                                                                                     
}';

echo  $data;die;

这里是更新的 ajax

$.ajax({
            type  : 'GET',
            url   : 'test12.php',
            dataType : 'json',
            async : true,
            success : function(data){

                var html = '';
                var i;

                 for(i=0; i<data.result.length; i++){
                    html += '<div class="col-6 col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-4">'+
                                '<a href="#" class="popular-category h-100">'+
                                            '<span>'+ '<img src="assets/images/dino.jpeg"class="img-fluid" >'+ '</span>'+
                                '<span class="icon mb-3"><span class="flaticon-flower">'+ '</span></span>'+
                                '<span class="caption mb-2 d-block">'+ data.result[i].name +'</span>'+
                                 '<span class="caption mb-2 d-block">'+ data.result[i].state +'</span>'+
                                '</a>'+
                        '</div>';
                } 

                $('#show_data').html(html);
            }
        });

【讨论】：