通过异步获取json来展示数据表格，性能提高不少。实例如下：
前台：
<!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="../jquery-3.1.1.min.js"></script>
<style type="text/css">
#table, #table tr,#table th, #table td {
border:1px solid black;
border-collapse:collapse;
text-align:center;
}
</style>
<script>
$(function () {
$("#showTable").click(function () {
var $table = $("#table");
var name = $("#userName").val();
var pwd = $("#pwd").val();
$.ajax({
url: "GetStudent.ashx",
type: "post",
dataType:"json",
data: { Name: name, Pwd: pwd },
success: function (data) {
if (!jQuery.isEmptyObject(data))
{
$("#table").empty();
$("span").html("");
$("<th>编号</th><th>姓名</th><th>性别</th> <th>出生日期</th><th>县/区编号</th> <th>专业编号</th><th with="50px">操作</th></tr>").appendTo("#table");
for (var i = 0; i < data.length; i++) {
$("<tr><input type="hidden" value=""+data[i].Id+""/><td>" + data[i].Id + "</td><td>" +
data[i].Name + "</td><td>" + data[i].Sex + "</td><td>" +
data[i].Birthday + "</td><td>" + data[i].DistrictId + "</td><td>" + data[i].MajorId + "</td><td><a href="GetStudent.ashx?id="+data[i].Id+"">修改</a></td></tr>").appendTo("#table");
}
$("#table tr:even").css("background", "#EBE9C2");
$("a").css("text-decoration","none");
}
else
{
$("#table").empty();
$("span").html("无查询结果");
}
}
})
})
})
</script>
</head>
<body>
<table class="table1">
<tr>
<td> 用户名：</td>
<td><input type="text" id="userName"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="pwd"/></td>
</tr>
</table>
<input type="button" value="显示列表" id="showTable" />
<div>
<table id="table"></table>
</div>
<span></span>
</body>
</html>
异步页：
public void ProcessRequest(HttpContext context)
{
string id=context.Request.QueryString["Id"];
if (string.IsNullOrEmpty(id))
{
string result = "{}";
string name = context.Request.Params["Name"];
string pwd = context.Request.Params["Pwd"];
if (name == "admin" && pwd == "123456")
{
string sql = "select * from T_Student";
DataTable dt = SqlHelper.ExecuteDataTable(sql);
string json = DataTableToJson(dt);
result = json;
}
context.Response.Write(result);
}
else
{
string sql = "select * from T_Student where Id=@Id";
SqlParameter [] sp=new SqlParameter[]{
new SqlParameter("@Id",id)
};
DataTable dt= SqlHelper.ExecuteDataTable(sql, sp);
}
}
/// <summary>
/// 将DataTable转化为json格式
/// </summary>
/// <param name="dt"></param>
/// <returns></returns>
public string DataTableToJson(DataTable dt)
{
StringBuilder Json = new StringBuilder();
Json.Append("[");
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
Json.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
Json.Append(""" + dt.Columns[j].ColumnName.ToString() + "":"" + dt.Rows[i][j].ToString() + """);
if (j < dt.Columns.Count - 1)
{
Json.Append(",");
}
}
Json.Append("}");
if (i < dt.Rows.Count - 1)
{
Json.Append(",");
}
}
}
Json.Append("]");
return Json.ToString();
}
之前不明白的一点是：什么时候用Json.parse()方法。测试之后表明，当$.ajax()方法中指明 dataType:"json" 时，无需用Json.parse()方法解析字符，只要后台传来的数据是正确的json格式就可以。如果不指定dataType，则data中得到的是字符串，如果想要解析为json输出到界面，则需用Json.parse()方法。