Question

尝试发布到返回JSON响应的PHP文件，然后使用它显示结果，但只显示一条未定义的记录值。

这是core/backend/comm.php的JSON响应：

{
    "name": "Rehan",
    "location": "Pune",
    "description": "hello hi",
    "created_by": 13692,
    "username": "xyz",
},
{
    "name": "Sameer",
    "location": "Bangalore",
    "description": "how are you",
    "created_by": 13543,
    "username": "abc",
},
<!--JSON RESPONSE ENDS-->

这是我尝试但无法使用的代码：

$('[id^="cat"]').click(function() {
   // do something
  var prot= this.getAttribute("prot");


       jQuery.ajax({
    url: "core/backend/comm.php",
    data:{ prot: prot }, 
    // $("#query_form").serialize(),
    type: "POST",
    success:function(data){

    // $("#repo").html(data);

data = [data];
var htmlText = '';

            for ( var key in data ) {
                htmlText += '<div class="div-conatiner">';
                htmlText += '<p class="p-name"> Name: ' + data[key].name + '</p>';
                htmlText += '<p class="p-loc"> Location: ' + data[key].location + '</p>';
                htmlText += '<p class="p-desc"> Description: ' + data[key].description + '</p>';
                htmlText += '<p class="p-created"> Created by: ' + data[key].created_by + '</p>';
                htmlText += '<p class="p-uname"> Username: ' + data[key].username + '</p>';
                htmlText += '</div>';
            }

            $('#repo').append(htmlText);


    },

    error:function (){}
    });

});

更正的代码：

$('[id^="cat_"]').click(function() {
   // do something
  var prot= this.getAttribute("prot");


    jQuery.ajax({
    url: "core/backend/comm.php",
    // dataType: "text",
    data:{ prot: prot }, 
    // $("#query_form").serialize(),
    type: "POST",
    success:function(data){

    // $("#repo").html(data);
console.log(data);
var data = JSON.parse(data);
var htmlText = '';

            for ( var key in data ) {
                    htmlText += '<div class="div-conatiner">';
                    htmlText += '<p class="p-name"> Name: ' + data[key].name + '</p>';
                    htmlText += '<p class="p-loc"> Location: ' + data[key].location + '</p>';
                    htmlText += '<p class="p-desc"> Description: ' + data[key].description + '</p>';
                    htmlText += '<p class="p-created"> Created by: ' + data[key].created_by + '</p>';
                    htmlText += '<p class="p-uname"> Username: ' + data[key].username + '</p>';
                    htmlText += '</div>';
                }

                $('#repo').append(htmlText);


    },

    error:function (){}
    });




});

这是已更正的JSON响应：

[ {
        "name": "Rehan",
        "location": "Pune",
        "description": "hello hi",
        "created_by": 13692,
        "username": "xyz"
    },
    {
        "name": "Sameer",
        "location": "Bangalore",
        "description": "how are you",
        "created_by": 13543,
        "username": "abc"
    }]

Answer 1

这种无法预测的行为的原因是您在ajax调用中使用了错误的dataType。当您需要的数据类型明确为dataType：'json'时，您就可以使用dataType：'text'，或者甚至可以省略dataType，因为默认情况下，jquery对XML，JSON，脚本或html类型的数据使用Intelligent Guess。文档here。

jQuery尝试根据响应的MIME类型猜测dataType。这意味着，如果在ajax调用中省略了dataType，则PHP代码应在响应中使用正确的“ Content-type”标头（application / json）。如果您不确定是这种情况，请使用dataType：'json'。

最后，总是可以使用JSON.parse（data）;如果以字符串格式返回，则反序列化JSON数组。

如何显示使用Ajax从服务器从JSON中提取的多个记录？

1 个答案: