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 }

  謝謝觀看!!!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM