Ajax局部刷新

body部分:

<body>
  <table class="tb" id="list">
         <tbody>
             <tr id="onlinelist">
                <th>操作</th>
                <th>用户账号</th>
                <th>用户昵称</th>
                <th>登陆时间</th>
                <th>经度</th>
                <th>纬度</th>
                <th>token值</th>
            </tr>

            <c:forEach items="${list}" var="list">
            <tr class="demo">
                <td>
                 <a onclick="onlineout(this)" userAccount="${list.userAccount }">
                    <input type="button" value="强制下线"/>
                 </a>
                 </td>
                <td>${list.userAccount }</td>
                 <td>${list.nickName }</td>
                <td>${list.loginTime }</td>
                <td>${list.longitude }</td>
                <td>${list.latitude }</td>
                <td>${list.token }</td>
            </tr>
            </c:forEach>

       </tbody>

    </table>
   <span id="jumpTo" style="display: none;">3</span> 
   <script type="text/javascript">countDown(3);</script>  
</body>

js部分代码片段:

<script type="text/javascript">    
function countDown(secs){    

 var jumpTo = document.getElementById('jumpTo');
 jumpTo.innerHTML=secs; 
 if(--secs>0){ 
     setTimeout("countDown("+secs+")",1000);    
     }    
 else{
        $.ajax({
            type : "POST",
            url : "${basePath}CustomerController/AjaxonlineList.do",
            async : false,
            data: {},
            success : function(data) {
                           $(".demo").remove();
                       $.each(data,function(i,item){
                         $("#list>tbody").
                         append("<tr class='demo'> "+
<                                   "input type='button' value='强制下线'/></a></td>"+
                             "<td>"+ item["userAccount"] +"</td>"+
                             "<td>"+ item["nickName"] +"</td>"+
                             "<td>"+ item["loginTime"] +"</td>"+
                             "<td>"+ item["longitude"] +"</td>"+
                             "<td>"+ item["latitude"] +"</td>"+
                             "<td>"+ item["token"] +"</td>"+
                                  "</tr>");
                         });
                       setTimeout("countDown("+3+")",1000); 
            },
            dataType : "json"
        }); 
     }    
 }    
</script> 

你可能感兴趣的:(Ajax)