ajax 自动更新页面数据
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
</head>
<linkrel="stylesheet"type="text/css"href="stylesheets/bootstrap-theme.min.css">
<linkrel="stylesheet"type="text/css"href="stylesheets/bootstrap.min.css">
<scriptsrc="javascripts/jquery-1.11.1.min.js"></script>
<scriptsrc="javascripts/bootstrap.min.js"></script>
<styletype="text/css">
body{margin:20px20px20px20px}
h1,h2,h3,.mastheadp,.subheadp,.marketingh2,.lead{font-family:"HelveticaNeue",Helvetica,Arial,"MicrosoftYaheiUI","MicrosoftYaHei",SimHei,"宋体",simsun,sans-serif;font-weight:normal;}
.show-grid[class*="span"]{
background-color:#EEEEEE;
border-radius:3px3px3px3px;
line-height:40px;
min-height:40px;
text-align:center;
}
.show-grid{
margin-bottom:20px;
margin-top:10px;
}
.show-grid[class*="span"]:hover{
background-color:#DDDDDD;
}
.show-grid[class*="span"][class*="span"]{
background-color:#CCCCCC;
}
.show-grid.show-grid[class*="span"]{
margin-top:5px;
}
.show-grid[class*="span"][class*="span"][class*="span"]{
background-color:#999999;
}
.bs-docs-example:after{
background-color:#F5F5F5;
border:1pxsolid#DDDDDD;
border-radius:4px04px0;
color:#9DA0A4;
content:"tabledemo：";
font-size:12px;
font-weight:bold;
left:-1px;
padding:3px7px;
position:absolute;
top:-1px;
}
form.bs-docs-example{
padding-bottom:19px;
}
.bs-docs-example{
background-color:#FFFFFF;
border:1pxsolid#DDDDDD;
border-radius:4px4px4px4px;
margin:15px0;
padding:39px19px14px;
position:relative;
}
.bs-docs-example-submenus.dropup>.dropdown-menu,.bs-docs-example-submenus.dropdown>.dropdown-menu{
display:block;
margin-bottom:5px;
position:static;
}
.bs-docs-example-submenus{
min-height:180px;
}
</style>
<body>
<scripttype="text/javascript">
setInterval(function(){update()},10000);
functionupdate(){
$.ajax({
url:'https://10.88.20.104/jsonStatics?',
dataType:"json",
cache:false,
jsonp:'callback',//
timeout:5000,
success:function(data){
tt="";
//alert(data.length);
var$myid=$("#tabletable-striped");//hashtable
$.each(data,function(i,item){
$(".tabletable-striped").append(
"<tr><td>"+item.id+"<td>"
+"<td>"+item.DevN+"</td>"
+"<td>"+item.CriN+"<td>"
+"<td>"+item.ErrN+"<td>"
+"<td>"+item.WarN+"<td></tr>");
});
alert('updated');
},
error:function(jqXHR,textStatus,errorThrown){
alert('errorXXX:'+textStatus+""+errorThrown);
}
});
}
</script>
<tableclass="tabletable-striped">
<thead>
<tr>
<th>SiteID</th>
<th>DeviceNumber</th>
<th>CriticalNumber</th>
<th>ErrorNumber</th>
<th>WarnNumber</th>
</tr>
</thead>
<tbody>
<%for(i=0;i<userlist.length;i++){%>
<tr><td><%=userlist[i].id%></td>
<td><%=userlist[i].DevN%></td>
<td><%=userlist[i].CriN%></td>
<td><%=userlist[i].ErrN%></td>
<td><%=userlist[i].WarN%></td>
</tr>
<%}%>
</tbody>
</table>
<!--<%for(i=0;i<userlist.length;i++){%>-->
<!--<li><a><%=userlist[i].id%></a></li>-->
<!--<%}%>-->
</body>
</html>
相关推荐
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo