Как отобразить несколько записей, извлеченных в JSON с сервера, используя Ajax?

Question

Попытка отправки в файл PHP, который возвращает ответ JSON, а затем использовать его для отображения результатов, но отображается только одна запись с неопределенными значениями.

Вот ответ JSON от core/backend/comm.php:

{
    "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

Причиной такого непредсказуемого поведения является то, что вы используете неправильный dataType в вашем вызове ajax. Вы используете dataType: 'text', когда вам явно нужен dataType: 'json' или вы даже можете опустить dataType, поскольку по умолчанию jquery использует Intelligent Guess для типов данных xml, json, script или html. Документация здесь.

jQuery пытается угадать dataType, основываясь на типе ответа MIME. Это означает, что если в ajax-вызове пропущен dataType, в ответе PHP-кода должен использоваться правильный заголовок "Content-type" (application / json). Если вы не уверены, что это так, используйте dataType: 'json'.

Наконец, всегда можно использовать JSON.parse(data); десериализовать массив JSON, если он возвращается в строковом формате.