插入div的html表中的JSON數組

Question

我想知道如何將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));

JS

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嗎？

Answer 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!"); 
        }
    });
}

希望能幫助到你。