靜態頁發送異步請求給程序頁(可以是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();
}
}