zoukankan      html  css  js  c++  java
  • Ajax+setInterval定时异步刷新页面

    这个是之前一个项目中用到的功能,现在记录一下他的使用步骤。

    现在讲解一下具体的关键代码:

    1.   window.onload:是指等待页面html和css都执行完毕以后才开始执行js文件,因为我这个文件是用来测试的,所以js文件放在头部。

    2.    setInterval()是启用计时器的函数,函数中需要传递两个参数,一个是一个函数,是指这段时间内需要执行什么操作,第二个参数是间隔的时间。

    3. clearTimeout()  是指当执行一段时间之后清除计时器,这个在该案例中没有使用到。

    4. $.post :是jquery操作ajax发出post请求的函数,其中需要三个参数,第一个参数是向哪个页面发送请求,第二个参数是向后台传递的参数,可以是键值对,也可以使json数据格式的,第三个参数是返回函数,里面的data是后端发送过来的数据。

    5. window.onload千万别写成window.onload() 

     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5     <title></title>
     6     <script src="../Js/jquery-1.7.1.js"></script>
     7     <link href="../Css/tableStyle.css" rel="stylesheet" />
     8     <script type="text/javascript">
     9         window.onload = function () {   
    10             loadUserInfo();
    11         }
    12         setInterval(function () {
    13             $("#tabList").load(location.href + " #tabList>*", "");
    14             loadUserInfo();
    15         }, 5000);
    16        
    17         function loadUserInfo() {
    18             $.post("UserList.ashx", {}, function (data) {
    19                 var serverData = $.parseJSON(data);
    20                 var serverDataLength = serverData.length;
    21                 for (var i = 0; i < serverDataLength; i++) {
    22                     $("<tr><td>" + serverData[i].Id + "</td><td>" + serverData[i].UserName + "</td><td>" +
    23                         serverData[i].UserPass + "</td><td>" + serverData[i].Email + "</td><td>").appendTo("#tabList");
    24                 }
    25             });
    26         }
    27     </script>
    28 </head>
    29 <body>
    30     <a href="AddUserInfo.html">添加</a>
    31     <table id="tabList">
    32         <tr><th>编号</th><th>用户名</th><th>密码</th><th>邮箱</th><th>时间</th><th>详细</th><th>删除</th><th>编辑</th></tr>
    33         
    34 
    35     </table>
    36 </body>
    37 </html>

    后端代码:

     1 using System;
     2 using System.Collections.Generic;
     3 using System.Linq;
     4 using System.Web;
     5 using BLL;
     6 using Model;
     7 namespace WebApp.ajax
     8 {
     9     /// <summary>
    10     /// UserList 的摘要说明
    11     /// </summary>
    12     public class UserList : IHttpHandler
    13     {
    14 
    15         public void ProcessRequest(HttpContext context)
    16         {
    17             context.Response.ContentType = "text/plain";
    18             BLL.UserInfoService UserInfoService = new BLL.UserInfoService();
    19              
    20             List<UserInfo> list = UserInfoService.GetList();  //将数据库中读取的数据保存在list中
    21             //转换json的方法
    22             System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
    23             string str = js.Serialize(list);//转换json数据
    24             context.Response.Write(str); //写入到返回的数据中
    25         }
    26         public bool IsReusable
    27         {
    28             get
    29             {
    30                 return false;
    31             }
    32         }
    33     }
    34 }

      谢谢观看!!!

  • 相关阅读:
    Oracle: 一个很让人纠结的sql问题,给自己长个记性
    TextInfo list of CultureInfo
    一个简单的面试题称粮食
    C++ 中什么是内联函数(zhuan)
    C/C++ 到 shellcode 过程
    常量指针与指针常量的区别(转帖)
    分清函数指针和指针函数
    如何编写自己的缓冲区溢出利用程序? (zz)
    动态获取API函数地址对抗win7 aslr安全机制(转)
    暴力搜索内存空间获得 Api 的线性地址
  • 原文地址:https://www.cnblogs.com/wangjinya/p/10748402.html
Copyright © 2011-2022 走看看