前言：
本示例大概功能是前臺通過JQuery的Ajax調(diào)用一般處理程序(Handler)，獲取表格需要顯示的信息，然后轉(zhuǎn)換成json格式返回給前臺，前臺獲取到數(shù)據(jù)后循環(huán)構建表格的行，最好把行附加到表里。
目標：
a 熟悉簡單JQuery Ajax的使用
b 了解如何構造基本的Json格式的數(shù)據(jù)（構建Json也可以通過第三方的dll）
c 熟悉下handler的基本用法
1 簡單效果圖
2 前臺代碼
%@ Page Language="C#" AutoEventWireup="true" CodeFile="DialogAjax.aspx.cs" Inherits="JQueryTest_DialogAjax" %>
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head runat="server">
title>/title>
link href="../JQueryUi/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" />
script src="../JQueryUi/jquery-1.4.2.min.js" type="text/javascript">/script>
script src="../JQueryUi/jquery-ui-1.8.5.custom.min.js" type="text/javascript">/script>
style type="text/css">
#divTb
{
width:800px;
border:1px solid #aaa;
margin:0 auto;
}
.even{background:#CCCCCC;}
.odd{background:#FFFFFF;}
/style>
script type="text/javascript">
//獲取發(fā)布模塊類型
function getModuleInfo() {
$.ajax({
type: "GET",
dataType: "json",
url: "../Handler/TestHandler.ashx?Method=GetModuleInfo",
//data: { id: id, name: name },
success: function(json) {
var typeData = json.Module;
$.each(typeData, function(i, n) {
var tbBody = ""
var trColor;
if (i % 2 == 0) {
trColor = "even";
}
else {
trColor = "odd";
}
tbBody += "tr class='" + trColor + "'>td>" + n.ModuleNum + "/td>" + "td>" + n.ModuleName + "/td>" + "td>" + n.ModuleDes + "/td>/tr>";
$("#myTb").append(tbBody);
});
},
error: function(json) {
alert("加載失敗");
}
});
}
$(function() {
getModuleInfo();
});
/script>
/head>
body>
form id="form1" runat="server">
div id="divTb">
table id="myTb" style=" width:100%">
/table>
/div>
/form>
/body>
/html>
3 Handler代碼
%@ WebHandler Language="C#" Class="TestHandler" %>
using System;
using System.Web;
using System.Collections.Generic;
using System.Text;
using DataDAL;
using DataEnity;
public class TestHandler : IHttpHandler {
HttpRequest Request;
HttpResponse Response;
public void ProcessRequest (HttpContext context) {
//不讓瀏覽器緩存
context.Response.Buffer = true;
context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
context.Response.AddHeader("pragma", "no-cache");
context.Response.AddHeader("cache-control", "");
context.Response.CacheControl = "no-cache";
context.Response.ContentType = "text/plain";
Request = context.Request;
Response = context.Response;
string method = Request["Method"].ToString();
System.Reflection.MethodInfo methodInfo = this.GetType().GetMethod(method);
methodInfo.Invoke(this, null);
}
public void GetModuleInfo()
{
StringBuilder sb = new StringBuilder();
string jsonData = string.Empty;
ListModule> lsModule = ModuleDAL.GetModuleList();
sb.Append("{\"Module\":[");
for (int i = 0; i lsModule.Count; i++)
{
jsonData = "{\"ModuleNum\":" + "\"" + lsModule[i].ModuleNum + "\"" + ",\"ModuleName\":" + "\"" + lsModule[i].ModuleName + "\"" + ",\"ModuleDes\":" + "\"" + lsModule[i].ModuleDes + "\"" + "},";
sb.Append(jsonData);
}
if (lsModule.Count > 0)
sb = sb.Remove(sb.Length - 1, 1);
sb.Append("]}");
Response.Write(sb);
}
public bool IsReusable
{
get {
return false;
}
}
}
以上代碼超簡單吧，JQuery Ajax動態(tài)生成Table表格的內(nèi)容就全部完成了，希望對大家有所幫助。
您可能感興趣的文章:- jQuery實現(xiàn)獲取table表格第一列值的方法
- jQuery對table表格進行增刪改查
- 基于JQuery的動態(tài)刪除Table表格的行和列的代碼
- JQuery 動態(tài)生成Table表格實例代碼
- 使用jQuery操作HTML的table表格的實例解析
- jQuery實現(xiàn)Table表格隔行變色及高亮顯示當前選擇行效果示例
- jQuery實現(xiàn)table表格checkbox全選的方法分析
- jQuery+CSS實現(xiàn)的table表格行列轉(zhuǎn)置功能示例
- jQuery實現(xiàn)table表格信息的展開和縮小功能示例
- jQuery動態(tài)操作表單示例【基于table表格】
- jQuery實現(xiàn)為table表格動態(tài)添加或刪除tr功能示例
