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

Question

I am trying to retrieve the data dynamically from MySQL database into web page using AJAX technique but the div content is repeated. 我试图使用AJAX技术从MySQL数据库动态检索数据到网页，但重复div内容。 I want to refresh the div without duplicate the information. 我想刷新div而不重复信息。

here is the code 这是代码

api.php 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 );
?>

client.php client.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>

Answer 1

Just change this 改变这个

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

to this 对此

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

Answer 2

try to use $('output').empty(); 尝试使用$('output').empty(); before the loop in order to avoid duplicating content. 在循环之前，以避免重复内容。

Answer 3

Another way you can do it as: 另一种方法可以做到：

var htmlData = '';
for (var i in rows)
     {
      var row = rows[i];          
      var id = row[0];
      var vname = row[1];
      htmlData + ="<b>id: </b>"+id+"<b> name: </b>"+vname+"<hr />";
   }
$('#output').html(htmlData);

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

问题描述

3 个解决方案

解决方案1
10 已采纳 2018-09-14 11:17:25

解决方案2
3 2018-09-14 11:26:19

解决方案3
0 2018-09-14 11:27:54

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

问题描述

3 个解决方案

解决方案1 10 已采纳 2018-09-14 11:17:25

解决方案2 3 2018-09-14 11:26:19

解决方案3 0 2018-09-14 11:27:54

解决方案1
10 已采纳 2018-09-14 11:17:25

解决方案2
3 2018-09-14 11:26:19

解决方案3
0 2018-09-14 11:27:54