當刷新保存按鈕而不刷新整個頁面時在頁面刷新表格

我有以下代碼，其中用戶輸入數據，並且一旦他點擊保存按鈕，所顯示的表被重新加載，如果新記錄被插入數據庫被顯示。表格從數據庫讀取數據。並即時使用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([email protected]) 
$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()

當按下保存按鈕時，如果所有字段都正確，它將保存在數據庫中，但記錄不會顯示在表的末尾，所以我希望在單擊保存並將記錄保存在數據庫中時應該重新載入並且新的記錄也會被顯示

來源

2014-06-25 lolo512

把你的表放入<div></div>並分配id和name，用戶點擊保存按鈕數據後發送到數據庫並生成新的html表，並重新加載數據和ajax響應數據到<div></div>已被分配。

提示：阿賈克斯可以響應返回的HTML代碼，做顯示器<div></div>

來源

2014-06-25 09:23:09 Deeper

可以PLZ通過更新code.im新的AJAX幫助 – lolo512

當刷新保存按鈕而不刷新整個頁面時在頁面刷新表格

回答

相關問題