停止在 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 内容的主要内容,如果未能解决你的问题,请参考以下文章