Html自动刷新表

时间:2011-06-29 14:07:02

标签: php html ajax html-table partial-page-refresh

我写了这个简单的代码和我连接到mysql数据库的这个表。它获取我在数据库中插入的数据,我想要的是页面自动刷新而不必刷新整个页面。
我的代码:

<html>
    <head>
        <title>Whats Up?</title>
    </head>
    <body>
        <a href="Register.php">Register</a> <a href="login.php">Login</a>


<?php
    mysql_connect('localhost', 'root');
    mysql_select_db('summerinstitute');
    $query="SELECT * FROM students";
    $result=mysql_query($query);
    echo "<table border=\"1\">";
    while ($row = mysql_fetch_assoc($result)) {
    echo "<tr>";
    echo "<td>";
    echo $row['fname'];
    echo "</td>";
    echo "<td>";
    echo $row['lname'];
    echo "</td>";
    echo "<td>";
    echo $row['username'];
    echo "</td>";
    echo "<td>";
    echo $row['Email'];
    echo "</td>";
    echo "</tr>";}
    ?>
    </body>
</html>

5 个答案:

答案 0 :(得分:1)

您需要将javascript和一些ajax实现仅用于refresh页面的一部分。

例如使用jQuery:

php page1.php:

<html>
    <head>
        <title>Whats Up?</title>
    </head>
    <body>
        <a href="Register.php">Register</a> <a href="login.php">Login</a>
        <?php include_once('page2.php')?>
    </body>
</html>

php page2.php:

<?php
    mysql_connect('localhost', 'root');
    mysql_select_db('summerinstitute');
    $query="SELECT * FROM students";
    $result=mysql_query($query);
    echo "<table border='1' id='tableID'>";
    while ($row = mysql_fetch_assoc($result)) {
    echo "<tr>";
    echo "<td>";
    echo $row['fname'];
    echo "</td>";
    echo "<td>";
    echo $row['lname'];
    echo "</td>";
    echo "<td>";
    echo $row['username'];
    echo "</td>";
    echo "<td>";
    echo $row['Email'];
    echo "</td>";
    echo "</tr>";}
    ?>

page1.php上的Javascript(把它放在标题中):

<script type='text/javascript'>
   $(function(){
       $.get('page2.php',{},function(data){
           $('#tableID').replaceWith($(data));  
       });
   });
</script>

答案 1 :(得分:0)

看看

http://en.wikipedia.org/wiki/Ajax_%28programming%29

它会回答你的问题

答案 2 :(得分:0)

             阿贾克斯         

    <script type="text/javascript">

        function Ajax()
        {
            var
                $http,
                $self = arguments.callee;

            if (window.XMLHttpRequest) {
                $http = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                try {
                    $http = new ActiveXObject('Msxml2.XMLHTTP');
                } catch(e) {
                    $http = new ActiveXObject('Microsoft.XMLHTTP');
                }
            }

            if ($http) {
                $http.onreadystatechange = function()
                {
                    if (/4|^complete$/.test($http.readyState)) {
                        document.getElementById('ReloadThis').innerHTML = $http.responseText;
                        setTimeout(function(){$self();}, 10000);
                    }
                };
                $http.open('GET', 'random.php' + '?' + new Date().getTime(), true);
                $http.send(null);
            }

        }

    </script>

</head>
<body>

    <script type="text/javascript">
        setTimeout(function() {Ajax();}, 10000);
    </script>
    <div id="ReloadThis">Default text</div>

</body>

答案 3 :(得分:0)

使用jQuery

setTimeout(function refreshTable() {
$.ajax({
    url:'/some-script.php',
    dataType:'html',
    data:{
       someparam:'someval'
    },
    success:function(data) {
        $('#yourTable').find('tbody').empty().append(data);
        setTimeout(refreshTable, 5000);
    }
 });
}, 5000); //every 5 seconds refresh

答案 4 :(得分:0)

我没有做过很多PHP,但你可能想要那个在它自己的单独页面上创建表的PHP,然后在你想要刷新表时使用AJAX来获取数据。如果你使用dojo,你可以做这样的事情。

的index.html

<html>
<head>
    <script type="text/javascript">
    //call this function whenever you want to update the table
    function updateTable()
    {
        dojo.xhrGet({
            url: 'my_table.php',
            handleAs: 'text',
            load: function(data) {
                dojo.byId('table').innerHTML = data;
            });
    }
    </script>
    <title>Whats Up?</title>
</head>
<body onload='updateTable()'>
    <a href="Register.php">Register</a> <a href="login.php">Login</a>

<div id='table'></div>
    </body>
</html>

my_table.php

<?php
    mysql_connect('localhost', 'root');
    mysql_select_db('summerinstitute');
    $query="SELECT * FROM students";
    $result=mysql_query($query);
    echo "<table border=\"1\">";
    while ($row = mysql_fetch_assoc($result)) {
    echo "<tr>";
    echo "<td>";
    echo $row['fname'];
    echo "</td>";
    echo "<td>";
    echo $row['lname'];
    echo "</td>";
    echo "<td>";
    echo $row['username'];
    echo "</td>";
    echo "<td>";
    echo $row['Email'];
    echo "</td>";
    echo "</tr>";}
    ?>