Auto refresh table without refreshing page PHP MySQL

问题

I have a very simple chat system I've built using PHP and MySQL (this is my second day ever using these languages) and I am wondering if there is any way to auto refresh the table data I'm pulling from my database and loading into an html table via PHP without having something like Javascript go and reload the whole web page... just reloading the html table with the data in it that PHP filled it up with.... Does that make sense?

Here is my code if it helps (for /chat.php)

<html><head></head><body><center>
<form action="chat.php" method="post">
Message: <br><textarea type="text" name="message" style="width:80%; height:300px;"></textarea><br>
<input type="submit" name="submitButton"/> <a href="http://www.****.com/chat.php"><button name="Refresh Chat">Refresh Chat</button></a>
</form>
<div style="width:100%;">

<?php

$host="****";
$user="****";
$password="****";

$cxn = mysql_pconnect ($host, $user, $password);

mysql_select_db("defaultdb", $cxn);

if (getenv(HTTP_X_FORWARDED_FOR)) {
    $ipaddress = getenv(HTTP_X_FORWARDED_FOR);
} else {
    $ipaddress = getenv(REMOTE_ADDR);
}

$message = nl2br(strip_tags(nl2br($_POST["message"])));

if (isset($_POST['submitButton'])) { 
    if ($message != "") {
        mysql_query("INSERT INTO ChatTest (ID, TimeStamp, Message) VALUES ('$ipaddress', NOW(), '$message')");
    }
    header('Location: chat.php');
}

$message = "";

$data = mysql_query("SELECT * FROM ChatTest ORDER BY TimeStamp DESC") or die(mysql_error()); 
 Print "<table border cellpadding=3 width='100%' style='table-layout:fixed'>
        "; 
 Print "<tr>"; 
 Print "<th style='width:10%;'>ID:</th><th style='width:10%;'>TimeStamp:</th><th style='width:70%;'>Message:</th>";
 while($info = mysql_fetch_array( $data )) { 
 Print "
        <tr>"; 
    Print " <td>".$info['ID'] . "</td> "; 
    Print " <td>".$info['TimeStamp'] . " </td>";
    Print " <td style='white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word'>".$info['Message'] . "</td></tr>
            "; 
 } 
 Print "</table>"; 

mysql_close($cxn);


?>

</div></center></body></html>

回答1:

The technique is called AJAX and one of the easiest libraries to add to the project would be jQuery. I assume your issue isn't with JavaScript, but with the idea of reloading the entire page.

UPDATE Because I'm such a nice guy ;) This should work, more or less, I haven't tried it out, so there might be a typo or two:

<?php

$host="****";
$user="****";
$password="****";

$cxn = mysql_pconnect ($host, $user, $password);

mysql_select_db("defaultdb", $cxn);

if (getenv(HTTP_X_FORWARDED_FOR)) {
$ipaddress = getenv(HTTP_X_FORWARDED_FOR);
} else {
$ipaddress = getenv(REMOTE_ADDR);
}

$message = nl2br(strip_tags(nl2br($_POST["message"])));
if (isset($_POST['submitButton'])) { 
if ($message != "") {
mysql_query("INSERT INTO ChatTest (ID, TimeStamp, Message) VALUES ('$ipaddress', NOW(), '$message')");
}
header('Location: chat.php');
}

$message = "";

$data = mysql_query("SELECT * FROM ChatTest ORDER BY TimeStamp DESC") or die(mysql_error()); 

$tbl = '';
$tbl .= "<table border cellpadding=3 width='100%' style='table-layout:fixed'>
"; 
$tbl .= "<tr>"; 
$tbl .= "<th style='width:10%;'>ID:</th><th style='width:10%;'>TimeStamp:</th><th style='width:70%;'>Message:</th>";
while($info = mysql_fetch_array( $data )) { 
$tbl .= "
<tr>"; 
$tbl .= " <td>".$info['ID'] . "</td> "; 
$tbl .= " <td>".$info['TimeStamp'] . " </td>";
$tbl .= " <td style='white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word'>".$info['Message'] . "</td></tr>
"; 
} 
$tbl .= "</table>"; 

mysql_close($cxn);

if (isset ($_GET['update']))
{
    echo $tbl;
    die ();
}

?>
<html><head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
</head><body><center>
<form action="chat.php" method="post">
Message: <br><textarea type="text" name="message" style="width:80%; height:300px;"></textarea><br>
<input type="submit" name="submitButton"/> <a href="http://www.****.com/chat.php"><button name="Refresh Chat">Refresh Chat</button></a>
</form>
<div id="messages" style="width:100%;">
  <?php echo $tbl; ?>
</div></center>
<script type="text/javascript">
$(document).ready (function () {
    var updater = setTimeout (function () {
        $('div#messages').load ('chat.php', 'update=true');
    }, 1000);
});
</script>
</body></html>

As for coding techniques, you might want to look into SQL-injections and maybe writing cleaner HTML, but I'm sure you'll get there :)