从 PHP 到 HTML 到 AJAX 显示 table
Displaying table from PHP in HTML through AJAX
我正在尝试在网页上显示我的 PHP 文件中的 table，该网页是使用 ajax 的 index.html 文件。我是 PHP 和 ajax 的新手，所以我目前不知道这些代码有什么问题。但是我所知道的是 javascript 文件中的这一行没有数据。
document.getElementById("divTable").innerHTML=xmlhttp.responseText;
它在没有 ajax 的情况下也能正常工作，但我当然需要转到 database.php 才能显示 table。我希望它显示在 index.html 上。另外，我的 PHP 文件中的删除按钮还能用吗？
P.S. 我正在使用 vi 编辑器，因为我目前正在服务器上对此进行编码。然而，这只是为了测试。我是服务器方面的新手，ajax 和 PHP 所以请原谅我的错误。并忽略我的 HTML 文件中的 table 格式。
P.P.S 我不知道 jQuery 的任何形式，我写的是我目前对 AJAX 的了解。
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="function.js" type="text/javascript"></script>
</head>
<body>
<form name="infoForm" method="post" onsubmit="return checkFields()" action="">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" maxlength="40"></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea maxlength="45" name="address"id="address" ></textarea></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" name="phone" id="phone" maxlength="20"><br></td>
</tr>
<tr>
<td>Gender:</td>
<td><input checked type="radio" name="gender" id="male" value="Male">Male
<input type="radio" name="gender" id="female" value="Female">Female</td>
</tr>
<tr>
<td>
Nationality:
</td>
<td>
<select name="nation">
<option value="Singapore">Singapore</option>
<option value="Malaysia">Malaysia</option>
<option value="Thailand">Thailand</option>
<option value="Indoensia">Indonesia</option>
<option value="Philippines">Philippines</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<br><input type="reset" value="Cancel">
<input type="submit" name="result" value="Submit" onclick="checkFields()"/>
</td>
</tr>
</table>
</form>
<div id="divTable"></div>
</body>
</html>
这是我的 javascript 文件，function.js:
function checkFields(){
var name = document.getElementById("name");
var address = document.getElementById("address");
var phone = document.getElementById("Phone");
if(confirm('Do you want to submit')){
if(name == null, name == ""||address == null, address == ""||phone == null, phone == ""){
alert("Please fill in all your details.");
return false;
}
else{
var page = "database.php";
var xmlhttp = new XMLHttpRequest();
if(xmlhttp==null){
alert("Your browser does not support AJAX!");
return false;
}
xmlhttp.onreadystatechange=function(){
document.getElementById("divTable").innerHTML=xmlhttp.responseText;
}
xmlhttp.open("GET", page, true);
xmlhttp.send(null);
}
}
else{
return false;
}
}
这是我的 PHP 文件，database.php:
<?php
// Define database parameters //
DEFINE ('DB_USER' ,'iqwer222');
DEFINE ('DB_PASSWORD', 'wfwqr');
DEFINE ('DB_HOST', 'localhost');
DEFINE ('DB_NAME', 'aqwfvaqf');
$table_info = "info";
// Connect to database
$conn = @mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) OR die ('Could not connect to Database:'. mysql_error());
@mysql_select_db (DB_NAME) OR die ('Could not select the Database: '.mysql_error());
// Delete Row
if(isset($_POST['delete'])){
$id = $_POST['deleteRow'];
$query_string = "delete from $table_info where user_id='$id'";
$result = @mysql_query($query_string);
}
//Check if phone no. is duplicate and if not, insert data
if(isset($_POST['result'])){
$phone = $_POST['phone'];
$query_string = "select phone from $table_info where phone='$phone'";
$result = @mysql_query($query_string);
$num_row = mysql_num_rows($result);
if($num_row){
echo "A same phone number has been found. Please enter a different phone number.";
}else{
$query_string = "insert into $table_info(name, address, phone, gender, nation) values('".$_POST['name']."','".$_POST['address']."','".$_POST['phone']."','".$_POST['gender']."','".$_POST['nation']."')";
$result = @mysql_query($query_string);
}
}
// Display table
$query_string = "select * from $table_info";
$result = @mysql_query($query_string);
$num_row = mysql_num_rows($result);
if($num_row){
echo "<table border=1>";
echo "<tr><th>Name</th><th>Address</th><th>Phone no.</th><th>Gender</th><th>Nationality</th><th>Created</th><th>Modified</th><th>Action</th></tr>";
while($row = mysql_fetch_array($result)){
echo "<tr><td>", $row['name'], "</td>";
echo "<td>", $row['address'], "</td>";
echo "<td>", $row['phone'], "</td>";
echo "<td>", $row['gender'], "</td>";
echo "<td>", $row['nation'], "</td>";
echo "<td>", $row['createdTime'], "</td>";
echo "<td>", $row['modifiedTime'], "</td>";
?>
<!--Delete button-->
<td><form id="delete" method="post" action="">
<input type="hidden" name="deleteRow" value="<?php echo $row['user_id'] ?>"/>
<input type="submit" name="delete" value="Delete" onclick="return confirm('Are you sure you want to delete this contact?')"/></td></form></tr>
<?php
}
echo "</table>";
}
else{
echo "0 results";
}
?>
<form method="post" action="index.html">
<input type="submit" name="goBack" value="Back"/>
</form>
考虑到您 database.php 文件正在返回正确的数据。
a) 错误：-
您没有在表单提交处理程序上使用 return false，只需添加 return false 就可以了
b) 建议
1) 您附加了 checkFields() 函数 2 次，一次点击提交按钮，另一次点击表单提交，删除其中一个（使用 sumbit）
2) User below callback in onreadystatechange ，你所做的那个会起作用，但它是不正确的，因为这个回调被调用了多次
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("divTable").innerHTML=xmlhttp.responseText;
}
}
示例代码如下：
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script >
function checkFields(){
var name = document.getElementById("name");
var address = document.getElementById("address");
var phone = document.getElementById("Phone");
if(confirm('Do you want to submit')){
if(name == null, name == ""||address == null, address == ""||phone == null, phone == ""){
alert("Please fill in all your details.");
return false;
}
else{
var page = "database.php";
var xmlhttp = new XMLHttpRequest();
if(xmlhttp==null){
alert("Your browser does not support AJAX!");
return false;
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("divTable").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", page, true);
xmlhttp.send(null);
}
}
return false;
}
</script>
</head>
<body>
<form name="infoForm" method="post" onsubmit="return checkFields()" action="">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" maxlength="40"></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea maxlength="45" name="address"id="address" ></textarea></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" name="phone" id="phone" maxlength="20"><br></td>
</tr>
<tr>
<td>Gender:</td>
<td><input checked type="radio" name="gender" id="male" value="Male">Male
<input type="radio" name="gender" id="female" value="Female">Female</td>
</tr>
<tr>
<td>
Nationality:
</td>
<td>
<select name="nation">
<option value="Singapore">Singapore</option>
<option value="Malaysia">Malaysia</option>
<option value="Thailand">Thailand</option>
<option value="Indoensia">Indonesia</option>
<option value="Philippines">Philippines</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<br><input type="reset" value="Cancel">
<input type="submit" name="result" value="Submit" />
</td>
</tr>
</table>
</form>
<div id="divTable"></div>
</body>
</html>
我正在尝试在网页上显示我的 PHP 文件中的 table，该网页是使用 ajax 的 index.html 文件。我是 PHP 和 ajax 的新手，所以我目前不知道这些代码有什么问题。但是我所知道的是 javascript 文件中的这一行没有数据。
document.getElementById("divTable").innerHTML=xmlhttp.responseText;
它在没有 ajax 的情况下也能正常工作，但我当然需要转到 database.php 才能显示 table。我希望它显示在 index.html 上。另外，我的 PHP 文件中的删除按钮还能用吗？
P.S. 我正在使用 vi 编辑器，因为我目前正在服务器上对此进行编码。然而，这只是为了测试。我是服务器方面的新手，ajax 和 PHP 所以请原谅我的错误。并忽略我的 HTML 文件中的 table 格式。
P.P.S 我不知道 jQuery 的任何形式，我写的是我目前对 AJAX 的了解。
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="function.js" type="text/javascript"></script>
</head>
<body>
<form name="infoForm" method="post" onsubmit="return checkFields()" action="">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" maxlength="40"></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea maxlength="45" name="address"id="address" ></textarea></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" name="phone" id="phone" maxlength="20"><br></td>
</tr>
<tr>
<td>Gender:</td>
<td><input checked type="radio" name="gender" id="male" value="Male">Male
<input type="radio" name="gender" id="female" value="Female">Female</td>
</tr>
<tr>
<td>
Nationality:
</td>
<td>
<select name="nation">
<option value="Singapore">Singapore</option>
<option value="Malaysia">Malaysia</option>
<option value="Thailand">Thailand</option>
<option value="Indoensia">Indonesia</option>
<option value="Philippines">Philippines</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<br><input type="reset" value="Cancel">
<input type="submit" name="result" value="Submit" onclick="checkFields()"/>
</td>
</tr>
</table>
</form>
<div id="divTable"></div>
</body>
</html>
这是我的 javascript 文件，function.js:
function checkFields(){
var name = document.getElementById("name");
var address = document.getElementById("address");
var phone = document.getElementById("Phone");
if(confirm('Do you want to submit')){
if(name == null, name == ""||address == null, address == ""||phone == null, phone == ""){
alert("Please fill in all your details.");
return false;
}
else{
var page = "database.php";
var xmlhttp = new XMLHttpRequest();
if(xmlhttp==null){
alert("Your browser does not support AJAX!");
return false;
}
xmlhttp.onreadystatechange=function(){
document.getElementById("divTable").innerHTML=xmlhttp.responseText;
}
xmlhttp.open("GET", page, true);
xmlhttp.send(null);
}
}
else{
return false;
}
}
这是我的 PHP 文件，database.php:
<?php
// Define database parameters //
DEFINE ('DB_USER' ,'iqwer222');
DEFINE ('DB_PASSWORD', 'wfwqr');
DEFINE ('DB_HOST', 'localhost');
DEFINE ('DB_NAME', 'aqwfvaqf');
$table_info = "info";
// Connect to database
$conn = @mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) OR die ('Could not connect to Database:'. mysql_error());
@mysql_select_db (DB_NAME) OR die ('Could not select the Database: '.mysql_error());
// Delete Row
if(isset($_POST['delete'])){
$id = $_POST['deleteRow'];
$query_string = "delete from $table_info where user_id='$id'";
$result = @mysql_query($query_string);
}
//Check if phone no. is duplicate and if not, insert data
if(isset($_POST['result'])){
$phone = $_POST['phone'];
$query_string = "select phone from $table_info where phone='$phone'";
$result = @mysql_query($query_string);
$num_row = mysql_num_rows($result);
if($num_row){
echo "A same phone number has been found. Please enter a different phone number.";
}else{
$query_string = "insert into $table_info(name, address, phone, gender, nation) values('".$_POST['name']."','".$_POST['address']."','".$_POST['phone']."','".$_POST['gender']."','".$_POST['nation']."')";
$result = @mysql_query($query_string);
}
}
// Display table
$query_string = "select * from $table_info";
$result = @mysql_query($query_string);
$num_row = mysql_num_rows($result);
if($num_row){
echo "<table border=1>";
echo "<tr><th>Name</th><th>Address</th><th>Phone no.</th><th>Gender</th><th>Nationality</th><th>Created</th><th>Modified</th><th>Action</th></tr>";
while($row = mysql_fetch_array($result)){
echo "<tr><td>", $row['name'], "</td>";
echo "<td>", $row['address'], "</td>";
echo "<td>", $row['phone'], "</td>";
echo "<td>", $row['gender'], "</td>";
echo "<td>", $row['nation'], "</td>";
echo "<td>", $row['createdTime'], "</td>";
echo "<td>", $row['modifiedTime'], "</td>";
?>
<!--Delete button-->
<td><form id="delete" method="post" action="">
<input type="hidden" name="deleteRow" value="<?php echo $row['user_id'] ?>"/>
<input type="submit" name="delete" value="Delete" onclick="return confirm('Are you sure you want to delete this contact?')"/></td></form></tr>
<?php
}
echo "</table>";
}
else{
echo "0 results";
}
?>
<form method="post" action="index.html">
<input type="submit" name="goBack" value="Back"/>
</form>
考虑到您 database.php 文件正在返回正确的数据。
a) 错误：-
您没有在表单提交处理程序上使用 return false，只需添加 return false 就可以了
b) 建议
1) 您附加了 checkFields() 函数 2 次，一次点击提交按钮，另一次点击表单提交，删除其中一个（使用 sumbit）
2) User below callback in onreadystatechange ，你所做的那个会起作用，但它是不正确的，因为这个回调被调用了多次
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("divTable").innerHTML=xmlhttp.responseText;
}
}
示例代码如下：
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script >
function checkFields(){
var name = document.getElementById("name");
var address = document.getElementById("address");
var phone = document.getElementById("Phone");
if(confirm('Do you want to submit')){
if(name == null, name == ""||address == null, address == ""||phone == null, phone == ""){
alert("Please fill in all your details.");
return false;
}
else{
var page = "database.php";
var xmlhttp = new XMLHttpRequest();
if(xmlhttp==null){
alert("Your browser does not support AJAX!");
return false;
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("divTable").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", page, true);
xmlhttp.send(null);
}
}
return false;
}
</script>
</head>
<body>
<form name="infoForm" method="post" onsubmit="return checkFields()" action="">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" maxlength="40"></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea maxlength="45" name="address"id="address" ></textarea></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" name="phone" id="phone" maxlength="20"><br></td>
</tr>
<tr>
<td>Gender:</td>
<td><input checked type="radio" name="gender" id="male" value="Male">Male
<input type="radio" name="gender" id="female" value="Female">Female</td>
</tr>
<tr>
<td>
Nationality:
</td>
<td>
<select name="nation">
<option value="Singapore">Singapore</option>
<option value="Malaysia">Malaysia</option>
<option value="Thailand">Thailand</option>
<option value="Indoensia">Indonesia</option>
<option value="Philippines">Philippines</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<br><input type="reset" value="Cancel">
<input type="submit" name="result" value="Submit" />
</td>
</tr>
</table>
</form>
<div id="divTable"></div>
</body>
</html>