通过AJAX以HTML显示PHP中的表

Question

我正在尝试从网页上的PHP文件显示一个表，该文件是使用Ajax的index.html文件。 我是PHP和Ajax的新手，所以我目前不知道代码出了什么问题。 但是我所知道的是，javascript文件中没有数据通过此行。

 document.getElementById("divTable").innerHTML=xmlhttp.responseText;

它无需ajax就可以工作，但是我当然需要转到database.php来显示表。 我希望它显示在index.html 。 另外，我的PHP文件中的删除按钮仍然可以使用吗？

PS：我正在使用vi编辑器，因为我目前正在服务器上对此进行编码。 但是，这只是为了进行测试。 我是服务器，Ajax和PHP的新手，所以请原谅我的错误。 并忽略HTML文件中的表格格式。

PPS我不知道任何形式的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>

Answer 1

考虑到您的database.php文件正在给出正确的数据。

a）错误：

您没有在表单提交处理程序上使用return false ，只需添加return false，事情将为您工作

b）建议

1）您将checkFields()函数附加2次，单击一次提交按钮，另一次提交表单，则删除其中之一（使用sumbit）

2） 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>

通过AJAX以HTML显示PHP中的表

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-05-07 06:51:54

通过AJAX以HTML显示PHP中的表

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-05-07 06:51:54

解决方案1
2 已采纳 2015-05-07 06:51:54