ajax 自动更新页面数据 -

maxer025

浏览: 80574 次
性别:
来自: 深圳

最近访客更多访客>>

u012363178

wangyy

cutecoot

kevin.shi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

ajax 自动更新页面数据

博客分类：

ajax

ajax

<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>

分享到：