如何使用jQuery和PHP动态显示MySQL数据?

I have a PHP page that lists a bunch of words that it grabs from a MySQL database table. It displays the words in different sizes based on a count in the table:

我有一个PHP页面，它列出了从MySQL数据库表中获取的一堆单词。它根据表中的计数显示不同大小的单词:

<?php
 $selectStr = "select * from test";

 if ($results = MySQL($dbName, $selectStr))
 {
  $rowCount = MySQL_NUMROWS($results);
 }

 $i = 0;
 while ($i < $rowCount)
 {
  echo '<div style="float: left; font-size:' . (MySQL_RESULT($results,$i,'count') * 5) . 'px;">' . MySQL_RESULT($results,$i,'word') . '</div>';
  $i++;
 }
?>

The trick is that I want the content to display dynamically. So if a user is sitting on the page, and one of the word counts goes up, I want the word to change size without the user refreshing the page.

诀窍在于，我希望内容是动态显示的。因此，如果用户坐在页面上，其中一个单词计数上升，我希望这个单词改变大小，而不需要用户刷新页面。

I am a novice with jQuery. I have used it a bit before, but only using examples. Can someone steer me in a good direction to have my page dynamically change the content without refreshing?

我是jQuery新手。我以前用过一些，但只用了一些例子。有人能引导我朝着一个好的方向，让我的页面动态地改变内容而不刷新吗?

2 个解决方案

#1

You can auto refresh your page body like this ... give body id='body'

你可以像这样自动刷新你的页面体……给身体id =“身体”

 <html>
 <head>
    <script type="text/javascript">
       var auto_refresh = setInterval(
         function ()
         {
          $('#body').load('wordscount.php').fadeIn("slow");
         }, 10000); // refresh every 10000 milliseconds
    </script>
 </head>
 <body>
     <div id='content'></div>
 </body>

Dont forget to include jquery inside your head tag

不要忘记在你的head标签中包含jquery

#2

It calls the file rowfunctie.php every 30000ms and fills the topbar diff with with the result of the getRows function.

它调用文件rowfunctie。php每30000ms，用getRows函数的结果填充topbar diff。

<div id="center-rows">
  <div id="links">Nu&nbsp;</div>
  <div id="rows">
    <div id="topbar"></div>
  </div>

  <div id="rechts">&nbsp;aantal rijen</div>
</div>

<script type="text/javascript">
function doRequest() {
  jQuery("#topbar").fadeOut('slow', function() {
    jQuery.ajax({
      type: "GET",
      url: "rowfunctie.php",
      cache: false,
      success: function(html){
        jQuery("#topbar").html(html);
        jQuery("#topbar").fadeIn('slow',function() {
        setTimeout('doRequest()',30000);
      });
   }
 });
 });
}
doRequest();
</script>

rowfunctie.php should look like this beneath:

rowfunctie。php应该如下所示:

<?php 
 $selectStr = "select * from test";

 if ($results = MySQL($dbName, $selectStr))
 {
  $rowCount = MySQL_NUMROWS($results);
 }

 $i = 0;
 while ($i < $rowCount)
 {
  echo '<div style="float: left; font-size:' . (MySQL_RESULT($results,$i,'count') * 5) . 'px;">' . MySQL_RESULT($results,$i,'word') . '</div>';
  $i++;
 }
?>

#1