背景說明： 寫了一個頁面自動刷新的Demo,用到的技術有js的setTimeout方法和jquery的cookie插件，緩存頁面數據
第一步：
1.後臺方法編寫
2.前臺js頁面
第二步：
1.引入插件
<script src="<c:url value="/" />resource/js/portal/jquery-1.8.0.min.js"></script>
<script src="<c:url value="/" />resource/js/portal/jquery.cookie.js" type="text/javascript"></script>
2，頁面上使用setTimeout（）設置一個超時，使其實現自動刷新；代碼如：
$(function(){
function autoRefreshData（）{
setTimeout(autoRefreshData, 5000); //當前的方法設置超時，
}
setTimeout(autoRefreshData, 5000);//頁面第一次加載，執行此方法，只執行一次
}）
3，使用cookie緩存頁面數據
// 設置cookie 緩存自動刷新的id
$.cookie('idlist', idlist);//使用cookie緩存頁面選擇的id值
$.cookie('idlist', null); //cookie值置空
idlist=$.cookie('idlist');//取出cookie值
idlist=idlist.split(",");//處理cookie爲list自動加上的逗號；改逗號在cookie中會被設置一個key值，在listz中逗號會被識別成一個object
4，頁面js代碼：
<script>
$(function(){
var idlist=[];
$(".clickBut").click(function(){
var data={};
data.id=$(this).attr("id");
$(this).attr({"disabled":"disabled"});
idlist.push(data.id);
console.log(idlist);
// 設置cookie 緩存自動刷新的id
$.cookie('idlist', idlist);
console.log($.cookie('idlist'));
return false;
});
//重置自動刷新button
$("#reset").click(function(){
$(".clickBut").attr("disabled",false);
$.cookie('idlist', null);
});
//自動刷新數據
function autoRefreshData(){
//id列表爲空驗證
if(!idlist.length==0||$.cookie('idlist')){
if(idlist.length==0){
idlist=$.cookie('idlist');
idlist=idlist.split(",");
}
$.ajax({
url:'<c:url value="/pageRefresh/refreshPageData.shtml" />',
data:JSON.stringify(idlist),
contentType : "application/json; charset=utf-8",
type:"POST",
datatype: "json",
success:function(rs){
if(rs.status=="SUCCESS"){
console.log(rs);
//刷新數據
for(var i=0;i<rs.list.length;i++){
$("table body tr[id='"+rs.list[i].id+"'] td").eq(0).html(rs.id);
$("table body tr[id='"+rs.list[i].id+"'] td").eq(1).html(rs.name);
$("table body tr[id='"+rs.list[i].id+"'] td").eq(2).html(rs.hostid);
$("table body tr[id='"+rs.list[i].id+"'] td").eq(3).html(rs.note);
$("table body tr[id='"+rs.list[i].id+"'] td").eq(4).html(rs.dir);
$("table body tr[id='"+rs.list[i].id+"'] td").eq(5).html(rs.status);
$("table body tr[id='"+rs.list[i].id+"'] td").eq(6).html(rs.lstime);
$("table body tr[id='"+rs.list[i].id+"'] td").eq(7).html(rs.stime);
$("table body tr[id='"+rs.list[i].id+"'] td").eq(8).html(rs.wtime);
$("table body tr[id='"+rs.list[i].id+"'] td").eq(9).html(rs.wqueue);
//重載頁面
location.reload();
console.log("leihou");
}
}
}
});
}
// else{
// alert("id爲空");
// }
//設置超時
setTimeout(autoRefreshData, 5000);
}
//設置超時
setTimeout(autoRefreshData, 5000);
});
</script>
