使用ajax命中保存时向表中添加记录

时间:2014-06-25 10:25:38

标签: javascript php mysql ajax

我有一个从数据库加载的表。我想每当用户输入一条记录时,该记录应该被添加到表中而不刷新整个页面。这应该是在ajax函数中。这是我的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) {
       ssword);
       var result = JSON.parse(data);
       $("#validate").html(result.msg);

                           }        
  });//end of ajax
     });//end of listener
        });//end of javascript

这是我的桌子(PHP):

<div class="table">
<?php 
 //connect to the database
   $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>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>
</thead>
</table>
</div>

如何刷新ajax函数中的表?

1 个答案:

答案 0 :(得分:1)

为你的课程添加课程。

<tbody class="res-container">

在您的AJAX通话中,您可以试试这个。

data1: {name: name, telephone: telephone, email: email, username: username, password: password},
success: function(response) {
    var html = '<tr>';
    html = html + '<td>' + this.data1.name + '</td>';
    html = html + '<td>' + this.data1.email + '</td>';
    html = html + '<td>' + this.data1.telephone + '</td>';
    html = html + '<td>' + this.data1.username + '</td>';
    html = html + '<td>' + this.data1.password + '</td>';
    html = html + '</tr>';
    $('.res-container').append(html);
}

this.data1.name基本上是访问ajax data1属性。所以无论你在那里分配什么名字,都应该在这里使用。

更新:

我修改了代码以更新正确的值。我不能在成功中使用this.data。所以我创建了另一个名为data1的属性,并使用this.data1来访问它。