javascript - 停止在 PHP AJAX MySQL 中重复 div 内容

标签 javascript php jquery mysql ajax

我正在尝试使用 AJAX 技术将数据从 MySQL 数据库动态检索到网页中,但 div 内容是重复的。我想在不重复信息的情况下刷新 div。

这是代码

API.php

<?php 

require 'db.php';
$query = "SELECT * FROM variables"; 
$result = mysqli_query($con,$query);           
$data = array();
while ( $row = mysqli_fetch_row($result) )
{
  $data[] = $row;
 }
echo json_encode( $data );
?>

客户端.php

  <html>
   <head>
    <script language="javascript" type="text/javascript" src="jquery.js"> 
     </script>
     </head>
      <body>

        <h2> Client example </h2>
        <h3>Output: </h3>

         <div id="output"></div>

         <script id="source" language="javascript" type="text/javascript">

         function ajaxcall() 
           {
           $.ajax({                                      
            url: 'api.php', data: "", dataType: 'json', timeout:2000, 
           success: function(rows)        
            {
            for (var i in rows)
                {
               var row = rows[i];          
                var id = row[0];
                   var vname = row[1];
              $('#output').append("<b>id: </b>"+id+"<b> name: </b>"+vname)
              .append("<hr />");
               }

              } 
              });
                }; 
                   ajaxcall();
                   setInterval(ajaxcall, (1 * 1000));

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

最佳答案

只要改变这个

 success: function(rows)        
            {
            for (var i in rows)

为此

success: function(rows)        
            {
            $('#output').html(''); // empty the container div and append new HTML
            for (var i in rows)

关于javascript - 停止在 PHP AJAX MySQL 中重复 div 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52330817/

相关文章:

javascript - 数据表服务器端脚本处理大量数据

php - 如何使用 Blackfire 分析 PHP shell 脚本应用程序或工作程序

javascript - 如何计算孙子div的宽度?

javascript - 在 Framework7 应用程序中添加用于录音的外部 cordova 插件

javascript - AngularJS 后退按钮默认打开到最后一个 ng-show

php - 避免 zip 文件内容的绝对路径名

javascript - 现场尝试了多种解决方案,均无效 : Play <audio> on Konami code

javascript - 优化 jQuery 剧透按钮

javascript - 制作自适应 iframe,然后在单击按钮时允许全屏显示

javascript - 将 DIV 保持在页面的顶部和中心,并具有更改大小 div 的能力