Php 如何使用ajax显示包含数据库数据的html表?
我是一个网络开发新手,我真的需要一些帮助。我想用ajax显示一个html表。这些代码来自两个不同的文件。我这样做对吗Php 如何使用ajax显示包含数据库数据的html表?,php,ajax,Php,Ajax,我是一个网络开发新手,我真的需要一些帮助。我想用ajax显示一个html表。这些代码来自两个不同的文件。我这样做对吗 <html> <body> <table border = 1> <tr> <th>FIRSTNAME</th> <th>LASTNAME</th>
<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>
这是我的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>
函数loadXMLDoc()
{
var-xmlhttp;
xmlhttp=新的XMLHttpRequest();
xmlhttp.onreadystatechange=函数()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
}
}
open(“GET”,“table.php”,true);
xmlhttp.send();
}
名字:
姓氏:
中间名:
这是我的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>
名字
姓氏
中间名
删除
/*试试这个代码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>';
?>
有一种叫做客户端脚本(使用javascript)和服务器端语言(使用php)
您可以使用一个AJAX调用来调用您的table.php并获得响应
因此,您只需在index.html中使用ajax方法编写代码
就像上面的代码一样
通过jQuery引用ajax
jquery是一个广泛使用的javascript库,您肯定会发现它很有趣
所以我建议有两个独立的文件
index.html,它将使用ajax方法调用table.php
将在ajax调用中执行并返回所需结果的table.php
然后由您决定在获得结果后如何显示结果。首先在浏览器中直接打开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
}
});
});
您可以使用json和jquery,并将临时页面加载到html div。当它工作时,您做得对。否则你就没有。如果你想知道一些具体的事情,你必须问清楚。不,看看这个。另外,您应该从table.php
中删除
和
。