这个是之前一个项目中用到的功能,现在记录一下他的使用步骤。
现在讲解一下具体的关键代码:
1. window.onload:是指等待页面html和css都执行完毕以后才开始执行js文件,因为我这个文件是用来测试的,所以js文件放在头部。
2. setInterval()是启用计时器的函数,函数中需要传递两个参数,一个是一个函数,是指这段时间内需要执行什么操作,第二个参数是间隔的时间。
3. clearTimeout() 是指当执行一段时间之后清除计时器,这个在该案例中没有使用到。
4. $.post :是jquery操作ajax发出post请求的函数,其中需要三个参数,第一个参数是向哪个页面发送请求,第二个参数是向后台传递的参数,可以是键值对,也可以使json数据格式的,第三个参数是返回函数,里面的data是后端发送过来的数据。
5. window.onload千万别写成window.onload()
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../Js/jquery-1.7.1.js"></script>
<link href="../Css/tableStyle.css" rel="stylesheet" />
<script type="text/javascript">
window.onload = function () {
loadUserInfo();
}
setInterval(function () {
$("#tabList").load(location.href + " #tabList>*", "");
loadUserInfo();
}, ); function loadUserInfo() {
$.post("UserList.ashx", {}, function (data) {
var serverData = $.parseJSON(data);
var serverDataLength = serverData.length;
for (var i = ; i < serverDataLength; i++) {
$("<tr><td>" + serverData[i].Id + "</td><td>" + serverData[i].UserName + "</td><td>" +
serverData[i].UserPass + "</td><td>" + serverData[i].Email + "</td><td>").appendTo("#tabList");
}
});
}
</script>
</head>
<body>
<a href="AddUserInfo.html">添加</a>
<table id="tabList">
<tr><th>编号</th><th>用户名</th><th>密码</th><th>邮箱</th><th>时间</th><th>详细</th><th>删除</th><th>编辑</th></tr> </table>
</body>
</html>
后端代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using BLL;
using Model;
namespace WebApp.ajax
{
/// <summary>
/// UserList 的摘要说明
/// </summary>
public class UserList : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
BLL.UserInfoService UserInfoService = new BLL.UserInfoService(); List<UserInfo> list = UserInfoService.GetList(); //将数据库中读取的数据保存在list中
//转换json的方法
System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
string str = js.Serialize(list);//转换json数据
context.Response.Write(str); //写入到返回的数据中
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
谢谢观看!!!