HTML автоматическое обновление таблицы - PullRequest
Новая
       9

HTML автоматическое обновление таблицы

2 голосов
/ 29 июня 2011

Я написал этот простой код и эту таблицу, которую я подключил к базе данных 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 ]

1 голос
/ 29 июня 2011

Вам нужно использовать 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>";}
    ?>

Javascript на page1.php (поместите его в заголовок): 

<script type='text/javascript'>
   $(function(){
       $.get('page2.php',{},function(data){
           $('#tableID').replaceWith($(data));  
       });
   });
</script>
0 голосов
/ 29 июня 2011

Я мало что сделал с PHP, но вы, вероятно, хотите, чтобы PHP создавал таблицу на отдельной странице, а затем использовал AJAX для получения данных всякий раз, когда вы хотите обновить таблицу. Если вы используете додзё, вы можете сделать что-то вроде этого.

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>";}
    ?>
0 голосов
/ 29 июня 2011

Использование 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
0 голосов
/ 29 июня 2011

Аякс 

    <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>

0 голосов
/ 29 июня 2011

Смотри

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

ответит на ваши вопросы

...