如何實現前端頁面的數字自動刷新

        這篇文章主要記錄剛纔如何實現下面列表中數據的更新，圖裏面只是選取了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;   	
    }

提交啓動服務器之後我們刷新頁面來看看結果: