ajax 自动更新页面数据

最新推荐文章于 2021-08-06 15:41:17 发布

maxer025

最新推荐文章于 2021-08-06 15:41:17 发布

阅读量340

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/maxer025/article/details/84706609

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<link rel="stylesheet" type="text/css" href="stylesheets/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="stylesheets/bootstrap.min.css">
<script src="javascripts/jquery-1.11.1.min.js"></script>
<script src="javascripts/bootstrap.min.js"></script>
<style type="text/css">

body{margin:20px 20px 20px 20px}
h1, h2, h3, .masthead p, .subhead p, .marketing h2, .lead {font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei UI","Microsoft YaHei",SimHei,"宋体",simsun,sans-serif;font-weight: normal;}

.show-grid [class*="span"] {
background-color: #EEEEEE;
border-radius: 3px 3px 3px 3px;
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: 1px solid #DDDDDD;
border-radius: 4px 0 4px 0;
color: #9DA0A4;
content: "table demo：";
font-size: 12px;
font-weight: bold;
left: -1px;
padding: 3px 7px;
position: absolute;
top: -1px;
}
form.bs-docs-example {
padding-bottom: 19px;
}
.bs-docs-example {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px 4px 4px 4px;
margin: 15px 0;
padding: 39px 19px 14px;
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>
<script type="text/javascript">
setInterval(function(){update()},10000);
function update(){
$.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=$("#table table-striped");//hash table
$.each( data , function( i, item ) {

$(".table table-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>

<table class="table table-striped">
<thead>
<tr>
<th>Site ID</th>
<th>Device Number</th>
<th>Critical Number</th>
<th>Error Number</th>
<th>Warn Number</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>



</body>
</html>

maxer025

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax 自动更新页面数据

body{margin:20px 20px 20px 20px} h1, h2, h3, .masthead p, .subhead p, .marketing h2, .lead {font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei UI","Microso...
复制链接

扫一扫

专栏目录