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


show data in popup after ajax load return the resulted data from database

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

我所做的一切都是当管理员登录时,AJAX 调用转到 getuser.php。 选择 JSON 格式的所有用户并返回结果。 到目前为止我还可以,但在那之后我无法做任何其他事情。 事实上,我想在带有"确定"或"十字/坎克尔"按钮的弹出窗口中显示返回记录。

下面是我的 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 数据。我正在寻找它,但我无法理解如何做到这一点。

这不是

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');