web前端_jquery的cookie插件的使用

背景说明：  写了一个页面自动刷新的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>