如何使用ajax显示包含数据库数据的html表 - How to show a html table with data from database using ajax?

我是网络开发的新手，我真的需要一些帮助。我想使用ajax显示一个html表。这些代码来自两个不同的文件。我这样做对吗？？

这是我的index.html

<html>
    <body>
<script>
function loadXMLDoc()
{
    var xmlhttp;
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","table.php",true);
    xmlhttp.send();
}
</script>
        <form action = "insert.php" method="post">
        Firstname: <input type="text" name="firstname"></br>
        Lastname: <input type="text" name="lastname"></br>
        Middlename: <input type="text" name="middlename"></br>
        <input type="submit" onclick="loadXMLDoc()">

        </form>
        <div id="myDiv"></div>
    </body>
</html>

这是我的table.php。当我点击提交按钮时，什么也没发生。有人能告诉我我做得对吗？？

<html>
    <body>
        <table border = 1>
            <tr>
                <th>FIRSTNAME</th>
                <th>LASTNAME</th>
                <th>MIDDLENAME</th>
                <th>DELETE</th>
            </tr>

    /*  <?php
                $con = mysqli_connect("localhost","root","","study");
                if (mysqli_connect_errno($con))
                    {
                        echo "Failed to connect to mysql" . mysqli_connect_error();
                    }
                    $result = mysqli_query($con,"SELECT * FROM sample_employers");
                    while($row=mysqli_fetch_array($result))
                    {
                        echo "<tr>";
                        echo "<td>" . $row['firstname'] . "</td>";
                        echo "<td>" . $row['lastname'] . "</td>";
                        echo "<td>" . $row['middlename'] . "</td>";
                        echo "<td> <input type='button' value='Delete' </td>"; 
                        echo "</tr>";
                    }
                    mysqli_close($con);
            ?>
        </table>
        </body>
</html>

首先直接在浏览器中打开ajax页面，这是找出您将获得的ajax响应的最佳方法。其次，将ajax代码更新为：

$(function(){
    $.ajax({
        url     : 'table.php',
        data    : {},
        type    : 'GET',
        success : function(resp){
            $("#myDiv").html(resp);
        },
        error   : function(resp){
            //alert(JSON.stringify(resp));  open it to alert the error if you want
        }  
    });
});

试试这个代码表.php

<?php
$con = mysqli_connect("localhost","root","","study");
if (mysqli_connect_errno($con))
    {
        echo "Failed to connect to mysql" . mysqli_connect_error();
    }
        echo '<table border = 1>';
        echo '<tr>';
            echo ' <th>FIRSTNAME</th>';
            echo '<th>LASTNAME</th>';
            echo ' <th>MIDDLENAME</th>';
            echo ' <th>DELETE</th>';
        echo ' </tr>';
    $result = mysqli_query($con,"SELECT * FROM sample_employers");
    while($row=mysqli_fetch_array($result))
    {
        echo "<tr>";
        echo "<td>" . $row['firstname'] . "</td>";
        echo "<td>" . $row['lastname'] . "</td>";
        echo "<td>" . $row['middlename'] . "</td>";
        echo "<td> <input type='button' value='Delete' </td>"; 
        echo "</tr>";
    }
    mysqli_close($con);
    echo '</table>';
?>

有一种叫做客户端脚本（使用javascript）和服务器端语言（在这种情况下使用php）的东西

你可以有一个AJAX调用，它会调用你的table.php并得到响应。

所以你所要做的就是在index.html.中为他的代码编写一个ajax方法

就像你上面写的一样
通过ajax的jQuery引用http://www.w3schools.com/jquery/ajax_post.asp（教程）

jquery是一个广泛使用的javascript库，您肯定会发现它很有趣。

所以我建议有两个单独的文件

index.html，将使用ajax方法调用table.php
table.php，它将在ajax调用上执行并返回所需的结果

然后由您决定如何在获得结果后显示结果。