在HTML表中追加新行而不重新加载整个页面

时间:2013-07-16 19:59:20

标签: php jquery ajax

我有一个管理门户,我们可以看到有多少用户注册。数据存储在MySQL中。

我需要在mySQL表中提供新数据时自动附加新行而不重新加载整个页面

<table>
    <tr>
    <th>NAME</th>
    </th>Register Time </th>
     </tr>

     <?php
     while($row=mysql_fetch_array(mysql_query("SELECT * FROM `register`"))){
         echo '<tr>';
         echo '<td>'.$row['name'].'</td>';
          echo '<td>'.$row['reg_time'].'</td>';
          echo '</tr>';
     }
     echo '</table>';

1 个答案:

答案 0 :(得分:0)

不要使用mysql_*个功能。请改用mysqli_*When should I use MySQLi instead of MySQL?

结果页:

<table class="users">
    <tr>
        <th>NAME</th>
        </th>Register Time </th>
    </tr>

<?php

$query = mysql_query("SELECT * FROM `register`");
$lastId = 0;
while ($row = mysql_fetch_array($query)) {
    $lastId = $row['id'];
    echo '<tr>';
    echo '<td>'.$row['name'].'</td>';
    echo '<td>'.$row['reg_time'].'</td>';
    echo '</tr>';
}
echo '</table>';
echo '<script>var lastId = '. $lastId .'</script>'; // remember the last id

?>

在同一页面加载Javascript:

$(document).ready(function() {
    var usersTable = $(".users");

    setInterval(function() {
        $.ajax({
            url: 'get_users.php?id='+lastId,
            dataType: 'json',
            success: function(json) {
                if (json.length > 0) {
                    $.each(json, function(key, user) {
                        usersTable.append('<tr><td>'+user.name+'</td><td>'+user.reg_time+'</td></tr>');
                        lastId = user.id;
                    });
                }
            }
        });
    }, 10000);
});

<强> get_users.php:

$lastId = (int)$_GET['id'];

$query = mysql_query('SELECT * FROM `register` WHERE `id` >' . $lastId);
$result = array();

while ($row = mysql_fetch_array($query)) {
    $result[] = $row;
}

echo json_encode($result);

重点是每隔 X 秒进行ajax调用,并将当前页面上最后一个用户之后注册的所有用户追加。

阅读: