在数据表中使用 PHP 和 JavaScript 显示 MySQL 表

Question

目前，我正在开发一个网站，以扩展和提高我在 Web 开发方面的知识，我是编程的初学者。

所以我试图在 html 数据表中显示名为accountinfo表的数据。 我试图使用php仅在 html 数据表中显示它，并在 html 文件中回显它，它工作得很好。 像这样：

<table id="tblList" class="text-center">
    <thead class="bg-light text-capitalize">
        <tr>
            <th hidden>User ID</th>
            <th>Control No.</th>
            <th>Account Name</th>
            <th>Date Inspection</th>
            <th>Date of Report</th>
            <th>Actual Use</th>
            <th>Landmark</th>
            <th>Registered Owner</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <?php
            echo $output;
        ?>
    </tbody>
</table>

此代码没有错误，但我想使用 javascript 将其显示在数据表中。

但我不知道如何处理它..

我试过一点，但我没有得到正确的结果。 它不会在 HTML 数据表中显示 Mysql 表的值。

我试过这个：

function loadAccountList() {
    $.ajax({
        type: 'POST',
        url: '../php_functions/tableList.php',
        dataType: 'json',
        data: xdata,
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
            $('#tbodyemplist').empty();
            var cells = eval("(" + response.d + ")");
            for (var i = 0; i < cells.length; i++) {

                var resDate;
                if (cells[i].res_date == "")
                {
                    resDate = "N/A";
                }
                else
                {
                    resDate = cells[i].res_date;
                }

                $('#tbodyemplist').append('<tr data-empid="' + cells[i].ID + '">'
                + '<td style="font-size:11px; text-align:center;" hidden>' + cells[i].badgenum+ '</td>'
                + '<td style="font-size:11px; text-align:center;">' + cells[i].CN+ '</td>'
                + '<td style="font-size:11px; text-align:center;">' +cells[i].AccName+ '</td>'
                + '<td style="font-size:11px; text-align:center;">' + cells[i].DI+ '</td>'
                + '<td style="font-size:11px; text-align:center;">' +cells[i].contact_no+'</td>'
                + '<td style="font-size:11px; text-align:center;">' + cells[i].DR+</td>'
                + '<td style="font-size:11px; text-align:center;">' +  cells[i].ActUse+ '</td>'                            
                + '<td style="font-size:11px; text-align:center;">' + cells[i].Landmark+ '</td>'
                + '<td style="font-size:11px; text-align:center;">' + cells[i].status+ '</td>'
                                    + '</tr>');
            }
        },
        error: function (error) {
            console.log(error);
        },
        complete: function () {
            $('#tblemplist').dataTable({
                "order": [],
                "columnDefs": [{
                    "targets": 'no-sort',
                    "orderable": false,
                }]
            }).end();
            $('#tblemplist').css('width', '100%');
        }
    });
}

并像这样在 html 中调用它

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jsFiles/index.js"></script>

还有php文件

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

    // Create connection
    $conn = mysqli_connect($servername, $username, $password, $dbname);
    // Check connection
    if (!$conn) {
        die("Connection failed: " . mysqli_connect_error());
    }

    $acc_id="";
    $acc_name="";
    $date_inspection="";
    $date_report = "";
    $act_useof_prop="";
    $landmark="";
    $reg_owner="";
    $bvcsi_control = "";
    $status = "";
    $lstrow = "";

    $sql = "SELECT account_id, account_name, date_inspection, date_report, act_useof_prop, landmark, reg_owner, bvcsi_control,status from accountinfo ORDER BY account_id ASC";
    $result = mysqli_query($conn,$sql);
    $num = mysqli_num_rows($result);
    $output = '';
    if ($num > 0)
    {
        while ($row = mysqli_fetch_array($result))
        {
            $ID= $row["account_id"];
            $CN= $row["bvcsi_control"];
            $AccName= $row["account_name"];
            $DI= $row["date_inspection"];
            $DR= $row["date_report"];
            $actUse= $row["act_useof_prop"];
            $landmark = $row["landmark"];
            $reg_owner = $row["reg_owner"];
            $status = $row["status"];

        }
    }
?>

这个项目将交给我曾担任过 OJT 的公司。

编辑

请参阅附图：控制台错误：

在此处输入图片说明

编辑：在此处输入图像描述

Answer 1

如果您想使用 javascript 根据您的database创建表格，您需要的是：

第一步是， Select数据到您的表并以json格式返回。

例如像这样，把它说成data.php ：

$temparray = array();

$sqlselect = "SELECT * FROM accountinfo ";
$result = $conn->query($sqlselect);
if ($result->num_rows > 0){
    while($row = $result->fetch_assoc()) 
    {
        array_push($temparray, $row); //save your data into array
    }
}
echo json_encode($temparray);

试试打开data.php是显示 json 数据吗？ 如果是，请转到第二步。

第二步是，使用ajax调用你的json数据。

例如像这样，把它说成loadTable.js ：

$.ajax({
    url: "data.php",
    type: "get", 
    dataType: "JSON",
    data: {}, //this is data you send to your server
    success: function(res)
    {   
        console.log(res); //show all data
        console.log(res.length); //check data length

        //doing looping for create tbody.

    }
})

如果 console.log 显示数据，您可以使用循环执行下一步。

我尝试创建简单的工作示例来帮助您，希望对您有所帮助：

 $.ajax({ url: "https://api.myjson.com/bins/dgd5u", //change to your php file (in my example data.php) type: "get", dataType: "JSON", data: {}, //this is data you send to your server success: function(res) { console.log(res); console.log(res.length); for (let i = 0; i < res.length; i++) { $('#testing').append('<tr><td>' + res[i]['name'] + '</td><td>' + res[i]['phone'] + '</td><td>' + res[i]['email'] + '</td></tr>') } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="col-md-6"> <table class="table table-bordered" style="text-align:center"> <thead> <td>Name</td> <td>Phone</td> <td>Email</td> </thead> <tbody id='testing'> </tbody> </table> </div> </div>

见整页。