静态页发送异步请求给程序页(可以是aspx或者是ashx),程序页在后台根据请求执行相应的方法,然后返回给静态页.
1.静态页代码:
<script type="text/javascript"> $(function(){ $.get("jquery-table-demo.aspx?action=MemberList", function(msg) { // alert(msg); var str_Json = msg; var str_table = ""; var json_val = eval("("+str_Json+")"); $.each(json_val.rows,function(index,item){ str_table += "<tr><td>"+item.id+"</td><td>"+item.name+"</td><td>"+item.email+"</td><td>"+item.mobile+"</td></tr>"; }); $("tbody").append(str_table); }); }) </script>
<table> <thead> <tr> <th>编号</th> <th id="memberName">姓名</th> <th>邮箱</th> <th>手机</th> </tr> </thead> <tbody> </tbody> </table>
2.程序页代码:
public string strInfo = ""; protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { if (Request.QueryString["action"] == "MemberList") { GetMember(); } } }
private void GetMember() { DataTable dtInfo = MemberInfo.GetMemberList(); if (dtInfo.Rows.Count > 0) { strInfo = "{rows:["; //StringBuilder sbInfo = new StringBuilder(); //sbInfo.Append("{rows:["); foreach (DataRow dr in dtInfo.Rows) { //sbInfo.Append("{'id':'"); //sbInfo.Append(dr["id"].ToString()); //sbInfo.Append("',"); //sbInfo.Append("'name':'"); //sbInfo.Append(dr["username"].ToString()); //sbInfo.Append("',"); //sbInfo.Append("'email':'"); //sbInfo.Append(dr["email"].ToString()); //sbInfo.Append("',"); //sbInfo.Append("'mobile':'"); //sbInfo.Append(dr["mobile"].ToString()); //sbInfo.Append("',"); strInfo += "{'id':" + "'" + dr["id"].ToString() + "',"; strInfo += "'name':" + "'" + dr["username"].ToString() + "',"; strInfo += "'email':" + "'" + dr["email"].ToString() + "',"; strInfo += "'mobile':" + "'" + dr["mobile"].ToString() + "'},"; } //sbInfo.Remove(sbInfo.Length - 1, 1).Append("]}"); //strInfo = sbInfo.ToString(); strInfo = strInfo.Substring(0, strInfo.Length - 1); strInfo += "]}"; Response.Write(strInfo); Response.End(); } }