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

Posted

技术标签:

【中文标题】停止在 PHP AJAX MySQL 中重复 div 内容【英文标题】:Stop repeating div content in PHP AJAX MySQL 【发布时间】:2019-02-19 04:46:15 【问题描述】:

我正在尝试使用 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 );
?>

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>

【问题讨论】:

您想获取新数据并附加到现有数据而不获取 div 中已有的数据? 只需将$('#output').append(...) 替换为$('#output').html(...) 你能澄清一下“刷新 div 而不重复信息”是什么意思吗?每次填充时是否要清空所有 div 内容? 没错,我想再次获取数据而不重复。 【参考方案1】:

改一下

 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)

【讨论】:

【参考方案2】:

尽量在循环前使用$('output').empty();,以避免重复内容。

【讨论】:

【参考方案3】:

你可以这样做的另一种方式:

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

【讨论】:

谢谢@DanielBrunner 的建议

以上是关于停止在 PHP AJAX MySQL 中重复 div 内容的主要内容,如果未能解决你的问题,请参考以下文章

使用AJAX,MySQL和PHP添加,删除,更新[重复]

PHP表单使用AJAX获取MySQL [重复]

在php中停止不推荐使用的警告[重复]

如何在jquery中停止Ajax调用[重复]

通过访问端点 URL 停止用户输入 AJAX 数据

jquery ajax 在表重复的末尾添加 mysql 行