刷新 div 而不刷新整个页面答案

【问题标题】：refreshing a div without refreshing the entire page刷新 div 而不刷新整个页面
【发布时间】：2017-01-04 16:34:02
【问题描述】：

这是我的代码

<!doctype html>
<html>
 <head>
  <script language="javascript" type="text/javascript" src="jquery.js"></script>
  <style>
   *{padding:0px; margin:0px;}
   #output{width:850px; height:400px; background-color:#E0F5CD; margin:auto;}
   #tbl{position:relative; top:30px;}
  </style>
 </head>
 <body>
  <div id="output"></div>
  <script id="source" language="javascript" type="text/javascript">
   $('#output').append("<br /><h3><center>Employee Table</center></h3>");
   $.ajax({                                      
    url: 'ajax_db.php', data: "", dataType: 'json', success: function(rows)       
     {
      for (var i in rows)
       {
        var row = rows[i];
        var employee_name = row[1];
        var email = row[2];
        var message = row[3];
        var date = row[4];
        $('#output').append(
                    "<table  border=1 width='850' id='tbl'border=1 width='850' id='tbl'>" +
                       "<tr>" +
                         "<td width='25%'>" + employee_name + "</td>" +
                         "<td width='25%'>" + email + "</td>" +
                         "<td width='25%'>" + message + "</td>" +
                         "<td width='25%'>" + date + "</td>" +
                        "</tr>" +
                    "</table>");
       }
     }
   });
  </script>

  <script>

  </script>
 </body>
</html>

我想要一个只加载 id 为 #output 的 div 而不加载整个页面的代码。 div 必须每 2 秒自动刷新一次。我调用了 api.php，它包含从数据库中提取的数据，显示 5 行。如果我删除一行，更新的数据必须在 2 秒后显示。这是我的代码 ajax_db.php

<?php 
  mysql_connect("localhost", "root", "root") || die(mysql_error());
  mysql_select_db("bijit") || die(mysql_error());
  $result = mysql_query("SELECT * FROM employee ORDER BY id DESC LIMIT 5");
  $data = array();
  while ( $row = mysql_fetch_row($result) )
   {
    $data[] = $row;
   }
  echo json_encode( $data );
?>

请给我推荐最简单的代码。

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/5611746/…
看起来您已经完成了大部分所需的工作。只需添加一个计时器。
你可能会发现$.load()也比$.ajax()简单一点。

标签： jquery ajax

【解决方案1】：

我只是稍微修改了您的代码。我将第一个 append() 更改为 html()，并将所有内容放在一个函数中，以便我们可以每 2 秒调用一次。

<script id="source" language="javascript" type="text/javascript">
   (function refresh() {
       $("#output").html("<br /><h3><center>Employee Table</center></h3>");
       $.ajax({                                      
         url: 'ajax_db.php', data: "", dataType: 'json', success: function(rows) {
           for (var i in rows) {
             var row = rows[i];
             var employee_name = row[1];
             var email = row[2];
             var message = row[3];
             var date = row[4];
             $("#output").append("<table  border=1 width='850' id='tbl'>" +
                       "<tr>" +
                     "<td width='25%'>" + employee_name + "</td>" +
                     "<td width='25%'>" + email + "</td>" +
                     "<td width='25%'>" + message + "</td>" +
                     "<td width='25%'>" + date + "</td>" +
                    "</tr>" +
                    "</table>");
           }
         }
      });
      setInterval(refresh, 2000);
   })();
</script>

【讨论】：

非常感谢。它现在可以工作，但是在我使用 setInterval 而不是 setTimeout 之后它工作了

【解决方案2】：

您可能需要每两秒获取一次新数据，

function explode(){

  ///......your ajax load function and append code here

}
setTimeout(explode, 2000);

【讨论】：