AJAX + div 动态显示后台数据

edifier1234 2012-09-07 03:50:55
先描述下背景:
1,我的后台是一个用C语言写的cgi,主要作用就是向前台的网页吐数据。
2,前台网页用的AJAX(从后台获得的数据通过一个div显示),并且设置xmlhttp.readyState==3,这样我可以做到,在cgi退出之前,只要后台向前台吐数据,前台的div就可以实时显示后台发来的数据,而不用等cgi退出后div才显示。

我的问题是:

现在虽然后台每吐一条数据,div就可显示一条,但是,随着后台数据不断吐过来,div的也在不断变大,直到cgi退出。
我想实现:cgi一直不退出,它一直向前台吐数据,但是div是个固定大小不能增大,当数据太多装不下的时候,把旧数据刷掉,载入新的数据。

请各位高手帮忙,我不是写前台的,所以最好给一段代码,谢谢!
...全文
656 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
edifier1234 2012-09-12
  • 打赏
  • 举报
回复
非常感谢两位高手的帮助,两位的代码我都有借鉴。谢谢!
泡泡鱼_ 2012-09-08
  • 打赏
  • 举报
回复
如果,你的ajax方法已经存在了,不是用的jquery的话,在获取数据后:
显示数据的div原始结构:<div id="ajaxData"><ul></ul></div>

var o = document.getElementById("ajaxData");
var temp="<li>你获取的数据</li>";
if(o.getElementsByTagName("li").length>50)
{
o.getElementsByTagName("ul")[0].innerHTML='';
}
o.getElementsByTagName("ul")[0].innerHTML+=temp;
泡泡鱼_ 2012-09-08
  • 打赏
  • 举报
回复
显示数据的div结构:<div id="ajaxData"><ul></ul></div>
你必须加载jquery才能运行以下代码
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


$.ajax({
type: "get",
cache: false,
url: "输出数据的地址?参数1=1&参数2=2",
beforeSend: function () {},
success: function (data) {
var o = $("#ajaxData");
var temp="<li>"+data+"</li>";
if(o.find("li").size()>50)//设置超过50条数据就清空
{
o.find("ul").innerHTML='';
}
o.find("ul").append(temp);
},
error: function (http) {alert('发生错误')},
complete: function (http) {

}
});
job_xiao 2012-09-07
  • 打赏
  • 举报
回复
<div id ='divs'><table></table></div>


我用Jquery 实现你的需求
function mydata(){
$post("数据的页面",{},function(data){
data=$.trim(data);
eval("var str="+data);
//这里我限定是数据多余50条就删除;
if($("#divs")find("tr").length>50){
$("#divs")find("table").html("");
}
$("#divs")find("table").append("<tr><td>"+str+"</td></tr>");


});
setTimeout("mydata()",1000);这里是设置没过1秒去取数据
}
mydata();

87,910

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧