Question

我有以下代码，用户输入数据，一旦他点击保存按钮，显示的表格将被重新加载，如果显示插入数据库的新记录。该表格从数据库中读取数据。并使用ajax加载数据并保存记录。这是我的HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Contact Info</title>
<link rel="stylesheet" type="text/css" href="style.css">
 <script src='jquery1.js'></script>
 <script src='jqueryTest.js'></script>
</head>
<body>
<h2>Contact Information</h2>
<p><span class="error">* required field</span></p>
Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="name" >
<span class="error">* </span>
<br><br>
Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="email" >
<span class="error">* </span>
<br><br>
Telephone:&nbsp;<input type="text" id="telephone" >
<span class="error">* </span>
<br><br>
UserName: <input type="text" id="username">
<span class="error">*</span>
<br><br>
Password:&nbsp;&nbsp;<input type="password" id="password">
<span class="error">*</span>
<br><br>
<input type="button" id="save" value="save" >
<div id="validate"></div>
<?php 
 //connect to the database
  $user=$_POST["user"];
  $pass=$_POST["pass"];
  $host=$_POST["host"];
  $connector = mysql_connect($host,$user,$pass)
      or die("Unable to connect");
  $selected = mysql_select_db("mysql", $connector)
    or die("Unable to connect");

  //execute the SQL query and return records
  $result = mysql_query("SELECT * FROM users ");
  ?>
<table border="2" style= "background-color: #99ffcc; color: #761a9b; margin: 0 auto;">
<thead>
  <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Telephone</th>
        <th>Username</th>
        <th>Password</th>
      <tbody>
        <?php
          while( $row = mysql_fetch_assoc( $result ) )
          {
           echo "<tr>
                 <td>{$row['name']}</td>
                 <td>{$row['email']}</td>
                 <td>{$row['telephone']}</td>
                 <td>{$row['username']}</td>
                 <td>{$row['password']}</td>
                 </tr>\n";
           }
        ?>
     </tbody>    
   </tr>

这是我的javascript代码：

$(document).ready(function(){
//save button listener  
$("#save").click(function(){
//receiving data entered by user from design.php        
     var name = $('#name').val();
     var email = $('#email').val();
     var telephone = $('#telephone').val();
     var username = $('#username').val();
     var password = $('#password').val(); 

$.ajax({
   type:'POST',
   url: 'contactData.php',             
   data:{"name":name,"telephone":telephone,"email":email, "username":username,   "password":password},
  // dataType:'json',
   success: function(data) {
       var result = JSON.parse(data);
       $("#validate").html(result.msg);   
                           }        
  });//end of ajax
     });//end of listener
        });//end of javascript

我的php代码如下：

<?php 

//connect to the database
  $con=mysql_connect("localhost","root","");
  mysql_select_db("mysql",$con) or die(mysql_error());

 $notTaken=false;//variable to check if the username is taken or not
 $username=$_POST["username"];

//to check if username is available in the database
$query = "SELECT username FROM users"; 
$result = mysql_query($query) or die(mysql_error());
//to check if it is the first record  
$result2 = mysql_query("SELECT * FROM users", $con);
 $num_rows = mysql_num_rows($result2);

   if($num_rows==0)
   {
    //if there are still no records don't do anything for now, once out of the if will go to   validty()
  }
    else{
while($row = mysql_fetch_array($result))
   {
    if( $username == $row['username'])
      {
         $takenMsg='{"msg":"Username Taken"}' ;
         echo $takenMsg;
         $exitMSG='{"msg":"Try Another Username"}';
         exit($exitMSG);
       }
    else{
         $notTaken=true;
         }
    }
  }
// after checking if the usernname exists or not check for field valdation
validity();


//check for valididty
function validity(){
//variables obtained by ajax
$name=$_POST["name"];
$telephone=$_POST["telephone"];
$email=$_POST["email"];
$username=$_POST["username"];
$password=$_POST["password"];
//check if phone is all digits
$pattern_phone = "|^[0-9\+][0-9\s+\-]*$|i";
//check if email is in the right form(example@example.com)
$pattern_email="/([\w\-]+\@[\w\-]+\.[\w\-]+)/";


//validate if fields are empty
if (($name == "") || ($email == "") || ($telephone == "") || ($username == "") || ($password == "")) 
{
    $errorMsg = '{"msg":"some input is missing"}';
    echo $errorMsg;      
 } 
  //validate if email is in the right form     
  elseif (!preg_match($pattern_email, $email)) 
   {
    $errorMsg = '{"msg":"email format is incorrect"}';
       echo $errorMsg;     
   } 
   //validtae if the telephone is all digits    
   elseif (!preg_match($pattern_phone, $telephone))
   {
   $errorMsg = '{"msg":"telephone should be all digits"}';
   echo $errorMsg;      
   }
 //if all fields aquire the correct validation, insert record to database

   else
  {
    $query1=mysql_query("INSERT INTO users(name,telephone,email,username,password)  values('$name','$telephone','$email','$username','$password') ");
   //if record inserted successfully display msg indicating so
   if($query1)
    {
       $msg='{"msg":"Your info has been sent"}';
       echo $msg;
    }
//if record not inserted sucessfully display msg indicating so       
  else
    {
       $msg='{"msg":"Error in sending your info"}';
       echo $msg;
    }
}
}//end of function validity()

当按下保存按钮时，如果所有字段都正确，则保存在数据库中，但记录未显示在表的末尾，所以我想在单击保存时将记录保存在数据库中，表格应该重新加载并且还将显示新记录

Answer 1

将您的表放在<div></div>并分配id和名称，在用户单击保存按钮数据后发送到数据库并生成新的html表，并将数据和ajax响应数据重新加载回{{1}被分配了。

提示：Ajax可以回复html代码并显示在<div></div>

中

在没有刷新整个页面的情况下点击保存按钮时刷新页面

1 个答案: