用JS实时调用数据显示在HTML页面上

JavaScript021

用JS实时调用数据显示在HTML页面上,第1张

要实现这个功能，要用到ajax获取后端数据，和前端js定时器的知识，首先自定义一个ajax获取要显示在html页面上的数据的方法，例如方法getdata,这个方法把获取的返回值，通过js动态的显示到html页面要显示的区域，然后再写一个js定时器来实现实时调用数据，如：<script>//定时器 异步运行 function hello(){ alert("hello")} var t2 = window.setTimeout("hello()",3000) //定时器//window.clearTimeout(t2)//去掉定时器 </script>把里面的hello方法换成你ajax获取数据的方法名，然后改下定时器里面的方法名和时间，这里设置的是3秒钟执行一次可以设置成你自己要的数据，就实现了你要的页面实时调用数据了。

JS代码：

var data1=0,data2=0,result=0

function read(){

//读取1.txt

$.ajax({

url : "1.txt",

cache : false,

success : function(data,status){

data1=data

}

})

//读取2.txt

$.ajax({

url : "2.txt",

cache : false,

success : function(data,status){

data2=data

compute()//计算

}

})

}

function compute(){

var r=0

while(data1!=0){

r=data1-data2*2

若计算结果有变化，将结果放在div中，也可以放在数据库中

if(result!=r){

$("#div3").append(r)

$("#div3").append('<br>')

result=r

}

break

}

}

$(document).ready(function(){

read()

setInterval("read()",3000)//定时循环读取

})

页面本身是不具备保存历史数据的功能的，需要借助其它手段来实现，常用方法如下：

异步更新页面。这种方法实际上页面是没有刷新的，通过AJAX导步获取信息来更新页面，这样可以保留原页面需要保留的数据。一些网站的发表评论后，评论内容更新，用的就是这个方法。

使用COOKIE保存。把需要保存的数据存储到COOKIE中，页面更新时，读取COOKIE渲染到页面上。比较常见的如：登录框记录用户名，下次登录无须重新输入。但COOKIE存储的数据量有限，不适合大的数据存储。

服务器端保存数据。与COOKIE保存类似，只不过内容是保存在服务器端，利用会话机制在页面更新时从服务器读取内容重新渲染。这是一种常见的而保险的方法。像一些文本编辑器，保存草稿等，就是通过这样的方式实现的