Question

现在试图解决这个问题几个小时了，但我不能让我的引导表以正确的方式填充。这是我的HTML：

<html>
<head>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="https://v40.pingendo.com/assets/bootstrap/bootstrap-4.0.0-beta.1.css" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.css" type="text/css">
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.js"></script>
    <script src="client.js"></script>



    <table class="table" id="maintable">
            <thead>
              <tr>
                <th data-field="queue">#</th>
                <th data-field="nation_name">Nation</th>
              </tr>
            </thead>
          </table>

</body>


</html>

PHP：

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "db";

$con = mysqli_connect('localhost','root','','db');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"db");
$sql = "SELECT queue, nation_name FROM nations WHERE queue IS NOT NULL ORDER BY queue ASC";
$result = mysqli_query($con, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        echo json_encode($row);
    }
} else {
    echo "0 results";
}

mysqli_close($con);

?>

JS：

url = "ws://localhost:8080";
ws = new WebSocket(url);

// event emmited when connected
    ws.onopen = function () {
        console.log('websocket is connected ...');
        // sending a send event to websocket server
        ws.send('connected');
    }
    // event emmited when receiving message 
    ws.onmessage = function (ev) {
        console.log(ev.data);
    }

        $.ajax({
                type: 'POST',
                url: 'getqueue.php',
                data: {},
                success: function(response) {
                    alert(response);
                        $(function () {
                            $('#maintable').bootstrapTable({
                                data: response
                            });
                        });

                },
                error: function() {
                    //something
                }
            })

从PHP发送到页面的JSON数据看起来完全如下：

{"queue":"1","nation_name":"Afghanistan"}{"queue":"2","nation_name":"Sweden"}

但是当页面加载时，这是结果： Screenshot

为什么JSON数据没有按照我想要的方式填充？即，两行包含＆＃39;队列＆＃39;和＆＃39; nation_name＆＃39;

Answer 1

问题是此代码在一个中返回多个JSON字符串：

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        echo json_encode($row);
    }
}

相反，您需要将一个JSON字符串构建为行数组，并将其返回：

if (mysqli_num_rows($result) > 0) {
    $output = array();
    while($row = mysqli_fetch_assoc($result)) {
        $output[] = $row;
    }
    echo json_encode($output);
}

Answer 2

您下一个问题的解决方法是您没有正确使用引导程序库。您必须设置列并告诉它要使用哪些字段，否则它不知道放在哪里。修复@Matt S告诉你为PHP方做的事情，然后对客户端进行编辑。（我会在他的回答中做一个编辑，他可以根据需要进行同行评审）。除了设置列之外，你可以完全摆脱你的ajax请求，因为bootstrapTable支持直接给它一个url。

$('#table').bootstrapTable({
    url: 'getqueue.php',
    columns: [{
        field: 'queue',
        title: '#'
    }, {
        field: 'nation_name',
        title: 'Nation'
    }]
});

JSON数据没有正确填充引导表

2 个答案: