欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

如何实现前端页面的数字自动刷新

程序员文章站 2022-06-19 21:45:24
这篇文章主要记录刚才如何实现下面列表中数据的更新,图里面只是选取了3条记录,但是实际上是有20条记录,需求方是要求进入这个页面即可以获取到存入中的数据,这里详细描述如何来实现这个小...

这篇文章主要记录刚才如何实现下面列表中数据的更新,图里面只是选取了3条记录,但是实际上是有20条记录,需求方是要求进入这个页面即可以获取到存入中的数据,这里详细描述如何来实现这个小功能;

如何实现前端页面的数字自动刷新

我们的前端主要是通过freemarker+javascript+jquery+bootstrap方式来做的,为了让页面刷新即可显示数据,这里首先通过js来实现页面加载、数据获取的功能;                 

$(document).ready(function(){
	initini();
	initbaoxianconfig();
});

function initbaoxianconfig(){
	$.ajax({
		url:'/youbi/initbaoxianconfig',
		type:'post',
		datatpey:'json',
		success:function(json){	
			var list = json.busiconfiglist;
			var len = list.length;
			for (var i=0; i

 

上面选取了代码中的关键部分

$(document).ready(function()//jquery中这个功能你来实现页面的加载;

针对下面20条记录如何获取这里面采用了list的方式,后台代码通过获取存储这20条记录的表,ajax通过调用这个url后台返回一个map,map里面就是存储数据的list对象;

    @suppresswarnings("unused")
    @requestmapping("/youbi/initbaoxianconfig")
    @responsebody
    public map initbaoxianconfig(){
    	map retmap = new hashmap();
    	list busiconfig = youbibaojiaconfigservice.querybaojiaconfig();
    	list busiconfiglist = new arraylist();
    	retmap.put("busiconfiglist", busiconfig);
		return retmap;   	
    }

提交启动服务器之后我们刷新页面来看看结果:

如何实现前端页面的数字自动刷新