Question

我试图在用户点击保存按钮时重新加载表格。但问题是整个页面正在重新加载。有人帮忙。这是我的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);
       if (result.msg="Your info has been sent")
           {
           $("#table").load("design.php");
           return false;
           }
   }//end of success
   });//end of  ajax
     });//end of listener
        });//end of javascript

这是我要重新加载的div，它位于design.php页面中：

<!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>
<div id="table">
<?php 
  $username = "root";
  $password = "";
  $host = "localhost";

  $connector = mysql_connect($host,$username,$password)
      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>Telephone</th>
        <th>Email</th>
        <th>Username</th>
        <th>Password</th>
      <tbody class="container">
        <?php
          while( $row = mysql_fetch_assoc( $result ) )
          {
           echo "<tr>
                 <td>{$row['name']}</td>
                 <td>{$row['telephone']}</td>
                 <td>{$row['email']}</td>
                 <td>{$row['username']}</td>
                 <td>{$row['password']}</td>
                 </tr>\n";
           }
        ?>
     </tbody>    
   </tr>
</thead>
</table>
</div>

当点击保存按钮时，正在重新加载整个页面。为了重新加载div表的解决方案是什么

Answer 1

在design.php文件中只有<div id="table">，在原始文件中有<div id="show-table">，在ajax的成功函数中将整个页面存储为Object并像这样动态追加到div

var Obj = load('design.php');
$('#show-table').html(Obj);

请记住，design.php文件必须将文件与编写脚本的文件分开

使用jquery重新加载div而不是整个页面

1 个答案: