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

最新推荐文章于 2023-11-16 15:36:15 发布

myth_1

最新推荐文章于 2023-11-16 15:36:15 发布

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JAVA javascript jQuery mock测试工具

本文链接：https://blog.csdn.net/xkhgnc_6666/article/details/51728287

JAVA 同时被 3 个专栏收录

27 篇文章

订阅专栏

jQuery

6 篇文章

订阅专栏

mock测试工具

6 篇文章

订阅专栏

本文介绍了使用Freemarker、JavaScript、jQuery和Bootstrap实现前端页面数据自动刷新的技术细节。当页面加载时，通过$(document).ready()函数触发数据获取。后端通过Ajax调用URL，返回包含20条记录的Map对象，这些数据随后在前端页面上展示并自动更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章主要记录刚才如何实现下面列表中数据的更新，图里面只是选取了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<len; i++){
				var bl = list[i];
				if(bl.business_name == "车辆损失险"){
				    $("#chkclss_ischoice").val(bl.is_checked);
				    $("#chkchkclss_be").val(bl.baoe);
				    $("#chkclss_bf").val(bl.baofei);
				    $("#chkclss_enable").val(bl.is_valid);
				    $("#chkclss_vote").val(bl.is_vote);
				}else if(bl.business_name == "全车盗抢险"){
                                 .......

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

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

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

    @SuppressWarnings("unused")
    @RequestMapping("/youbi/initBaoXianConfig")
    @ResponseBody
    public Map<String,Object> initBaoXianConfig(){
    	Map<String,Object> retMap = new HashMap<String,Object>();
    	List<BusinessInfoModel> busiConfig = youBiBaoJiaConfigService.queryBaoJiaConfig();
    	List<Object> busiConfigList = new ArrayList<Object>();
    	retMap.put("busiConfigList", busiConfig);
		return retMap;   	
    }

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