插入了 div 的 html 表中的 JSON 数组答案

【问题标题】：JSON array in html table with div inserted插入了 div 的 html 表中的 JSON 数组
【发布时间】：2017-04-24 02:31:46
【问题描述】：

我想知道怎么把json转成html表格
php

$query = $conn->query("SELECT `Name`,`Author` FROM `details`;");
$array_name = Array();
$array_author = Array();


while($result = $query->fetch_assoc()){
    $array_name[] = $result['Name'];
    $array_author[] = $result['Author'];
}

echo json_encode(array('name'=>$array_name, 'author' =>$array_author));

function getbook(){
var json;
$.ajax({
    url: "getbook.php", 
    datatype: "json", 
    async:true,
    success: function(response) {
        json = JSON.parse(response);
        console.log(json);

}, 
    error: function() {
      console.log("ajax error!"); 
    }
 });

我希望结果是这样的

Name    Name    Name
Author  Author  Author

如果可能的话，名字和作者在同一个<td>
也可以在生成的每个<td> 中插入 div 吗？

【问题讨论】：

做一点研究，从.html()jquery函数开始。
我建议您不要将姓名和作者保存在不同的数组中。只需执行$arr[] = array('Name' => $result['Name'], 'Author' => $result['Author']); 之类的操作即可。在 javascript 中，您只需循环访问 var.Name 和 var.Author 的对象。
@FirstOne 你的意思是while？那么json编码应该是json_encode($arr);吗？
@AgnesLeung 正好^^。不要忘记在while之前创建$arr = array();。
访问这里以获取更多信息sitepoint.com/community/t/…

标签： javascript php jquery html json

【解决方案1】：

我会将name 和author 插入到同一个数组中：

$query = $conn->query("SELECT `Name`,`Author` FROM `details`;");
$data = array();

while($result = $query->fetch_assoc()){
    $data[] = [
        'name' => $result['Name'],
        'author' => $result['Author']
    ];
}

echo json_encode($data);

它将构建您的 json 数组，如下所示：

[{"name":"Some Name","author":"John Doe"},{"name":"Another Name","author":"Mary Jane"}]

然后从JS成功函数：

// create sample json array for demonstration
var data = [{"name":"Some Name","author":"John Doe"},{"name":"Another Name","author":"Mary Jane"}];

// ...

$('body').append('<table id="details" class="table"><thead><tr><td>Name</td><td>Author</td></tr></thead><tbody>');

data.forEach(function(details) {
    $('#details').append('<tr><td>'+details.name+'</td><td>'+details.author+'</td></tr>');
});

$('body').append('</tbody></table>');

// ...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

所以 JS 部分将如下所示：

function getbook(){
    var json;
    $.ajax({
        url: "getbook.php", 
        datatype: "json", 
        async:true,
        success: function(response) {
            $('body').append('<table id="details"><thead><tr><td>Name</td><td>Author</td></tr></thead><tbody>');
            data.forEach(function(details) {
                $('#details').append('<tr><td>'+details.name+'</td><td>'+details.author+'</td></tr>');
            });
            $('body').append('</tbody></table>');
        }, 
        error: function() {
            console.log("ajax error!"); 
        }
    });
}

希望对您有所帮助。

【讨论】：