Question

我是网络开发的新手，我真的需要一些帮助。我想用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>

Answer 1

首先直接在浏览器中打开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
        }  
    });
});

Answer 2

试试这个代码table.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>';
?>

Answer 3

有一种称为客户端脚本（使用javascript）和服务器端语言（在这种情况下使用php）

你可以进行一次AJAX调用，调用你的table.php并获得响应。

所以你需要在index.html中将他的代码作为ajax方法。

就像你上面编码
通过jQuery引用ajax http://www.w3schools.com/jquery/ajax_post.asp(tutorial)

jquery是一个广泛使用的javascript库，当然你会发现它很有趣。

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

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

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

如何使用ajax显示包含数据库数据的html表？

3 个答案: