在ajax加载从数据库返回结果数据后,在弹出窗口中显示数据

时间:2013-10-25 18:41:51

标签: php json jquery

我有一个问题,我无法解决它。我有数据库中的用户。每个用户都有一些护照到期日。现在我想弹出所有那些在登记护照到期时还剩3天的用户。

我是怎么做的就是当管理员登录时ajax调用转到getuser.php。选择json formate中的所有用户并返回结果。我很高兴,但在此之后我无法做任何其他事情。 infact我想用ok或cross / cancle按钮在弹出窗口中显示返回记录。

下面的

是我的ajax调用脚本。

  <script>
    $(document).ready(function(){
      var url = 'getuser.php';
         $.getJSON(url, function(data) {
         $.each(data, function(index, data) {
       $('#tablebody').append('<tr>');
       $('#tablebody').append('<td>'+data.Emp_num+'</td>');
       $('#tablebody').append('<td>'+data.Emp_id+'</td>');
       $('#tablebody').append('<td>'+data.Eng_name+'</td>');
       $('#tablebody').append('<td>'+data.Pass_exipry_date+'</td>');
       $('#tablebody').append('</tr>');
         });
     });
  });

 </script>

以下是服务器端脚本的代码(getuser.php)

  <?php 
  $conn = mysql_connect('localhost','root','');
  if(!$conn){
  die('Mysql connection error '.mysql_error());
  }

  $db = mysql_select_db('db',$conn);
  if(!$db){
  die('Database selection failed '.mysql_error());
  }

  $expiry = mysql_query("select * from table where PASSPORT_EXPIRED_DATE > CURRENT_DATE - INTERVAL 3 DAY");

  $data = array();
  while($row = mysql_fetch_array($expiry)){
  $row_data = array(
  'Emp_num' => $row['EMPLOYEE Number'], 
  'Emp_id' => $row['EMPLOYEE ID'],
  'Eng_name' => $row['ENGLISH FULL NAME'],
  'Pass_exipry_date' => $row['PASSPORT_EXPIRED_DATE']
  );
 array_push($data, $row_data);
 }
 echo json_encode($data);
?>

下面是我附加ajax响应数据的表

  <table class="table table-striped">
    <thead>
       <tr>
         <th>Employee Number</th>
         <th>Employee ID</th>
         <th>English Name</th>
         <th>Passport Expirey Date</th>
     </tr>
   </thead>
   <tbody id="tablebody">
   </tbody>
</table>

现在我想在一个弹出窗口中显示整个表,其中ajax从database.i中返回数据。我正在搜索它但我无法理解如何操作。

1 个答案:

答案 0 :(得分:0)

这不是append()的工作方式。您只能附加整个元素。试试这个:

$('<tr/>')
    .append('<td>' + data.Emp_num + '</td>')
    .append('<td>' + data.Emp_id + '</td>')
    .append('<td>' + data.Eng_name + '</td>')
    .append('<td>' + data.Pass_exipry_date + '</td>')
    .appendTo('#tablebody');