這個是之前一個項目中用到的功能,現在記錄一下他的使用步驟。
現在講解一下具體的關鍵代碼:
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 }
謝謝觀看!!!