如何在html中正确显示json数据数组？

Question

我阿贾克斯

$("form").on("submit", function() { 
    var data = { 
     "action": "test" 
    }; 

    data = $(this).serialize() + "&" + $.param(data); 
    $.ajax({ 
     type: "POST", 
     dataType: "json", 
     url: "ajax2.php", //Relative or absolute path to response.php file 
     data: data, 
     success: function (data) { 

      $("#main_content").slideUp("normal",function(){ 

      $(".the-return").html("<br />JSON: " + data); 
//how to alter this part to display data for each record in one div? 

      }); 
     } 
    }); 
    return false; 

}); 

我查询

$statement = $pdo->prepare("SELECT * FROM posts WHERE subid IN (:key2) AND Poscode=:postcode2"); 
    $statement->execute(array(':key2' => $key2,':postcode2'=>$postcode)); 
// $row = $statement->fetchAll(PDO::FETCH_ASSOC); 
    $json = array(); 
while($row = $statement->fetch()) { 
    array_push($json, array($row['Name'], $row['PostUUID'])); 
} 

    header('Content-Type: application/json'); 
    echo json_encode($json); 

结果以这种形式显示当前：

JSON: jack,55421894ab602,test,55439324cc43d 

但我想，显示一个类似：

Name:jack, 
Id:55421894ab602 
.....and some other info- 

Name:test 
Id:55439324cc43d 
.....and some other info- 

这一部分：

$(".the-return").html("<br />JSON: " + data); 

我想：data[0]; 但是当我这样做，只有第一条记录显示明显。

我想要的是：

data[0]本身是一个数组。如何显示该数组以及在nice html中获取的其他记录？

编辑：通过编辑这些代码，我只能检索最后一个结果，而不是循环访问数组。

AJAX 成功：功能（数据）{

  $("#main_content").slideUp("normal",function(){ 

      //$(".the-return").html("<br />JSON: " + j_data); 
      for (i = 0; i < data.length; i++) { 
      $(".the-return").html("<div>Name:" + data[i].name + "<br/>Id:" + data[i].id); 
     } 
      console.log(data); // this shows nothing in console,I wonder why? 
      //alert(j_data); 
      }); 
     } 

PHP

$json = array(); 
while($row = $statement->fetch()) { 
    //array_push($json, array($row['Name'], $row['PostUUID'])); 
    array_push($json, array("name" => $row['Name'], "id" => $row['PostUUID'])); 
} 

    header('Content-Type: application/json'); 
    echo json_encode($json); 

Answer 1

首先，让你的模板中的字段的名称，你需要将它们存储阵列中：

array_push($json, array("name" => $row['Name'], "id" => $row['PostUUID'])); 

json_encode后的结果 - > {“name”：“TheName”，“id”：“TheID”}

接下来，在你的js代码，如果它接收到的JSON是有效的，你可以做一个循环：

success: function (data) { 
    $("#main_content").slideUp("normal",function(){ 
     for (i = 0; i < data.length; i++) { 
      $(".the-return").html("<div>Name:" + data[i].name + "<br/>Id:" + data[i].id); 
     } 
    } 
} 

当然，你可以添加样式或类别的股利。

我希望它有帮助。