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

时间:2012-08-30 14:16:20

标签: php jquery mysql html5 dynamic

我有一个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++;
 }
?>

技巧是我想要动态显示内容。因此,如果用户坐在页面上,并且其中一个单词计数增加,我希望单词更改大小,而无需用户刷新页面。

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

2 个答案:

答案 0 :(得分:3)

您可以像这样自动刷新页面正文...给body id ='body'

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

别忘了在你的头标记中包含jquery

答案 1 :(得分:0)

它每隔30000ms调用一次rowfunctie.php文件,并使用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应该如下所示:

<?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++;
 }
?>