前言：

本示例大概功能是前台通过JQuery的埃阿斯调用一般处理程序（处理程序),获取表格需要显示的信息，然后转换成json格式返回给前台，前台获取到数据后循环构建表格的行，最好把行附加到表里。

目标：

a熟悉简单JQuery Ajax的使用

b了解如何构造基本的Json格式的数据（构建Json也可以通过第三方的dll)

c熟悉下处理者的基本用法

一简单效果图

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/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title/title link href='./jquery yui/jquery-ui-1。8 .5 .定制。CSS ' rel='样式表type=' text/CSS '/script src=' http :/jquery yui/jquery-1。4 .2 .量滴js ' type=' text/JavaScript '/script script src=' http :/jquery yui/jquery-ui-1。8 .5 .定制。量滴js ' type=' text/JavaScript '/script style type=' text/CSS ' # div TB { width :800 px；border:1px实心# aaamargin:0 auto }。甚至{背景： # CCCCCC；} .奇数{ background: # FFFFFF} /style脚本类型='text/javascript' //获取发布模块类型函数getModuleInfo() { $ .ajax({ type: 'GET '，dataType: 'json '，url: './Handler/TestHandler.ashx？Method=GetModuleInfo '，//data: { id: id，name: name }，success : function(JSON){ var type data=JSON .模块；$.每个(typeData，function(i，n){ var TbBody=' var tr color；if(I % 2==0){ TrCOlOr=' even '；} else { trColor=' odd } TbBody=' tr class=' trColor ' ' TD ' n . module um/' TD ' ' TD ' n . module name/' TD ' ' TD ' n . module des/' TD/tr '；$('#myTb ').追加(TbBody)；});}，错误：函数(json) { alert('加载失败');} });} $(function(){ getModuleInfo()；});/脚本/流浆池表单id=' form 1 ' runat=' server ' div id=' div TB ' table id=' myTb ' style=' width :100% '/table/div/form/body/html 3 Handler代码

%@ WebHandler语言=' c# ' Class=' TestHandler ' %使用系统；使用系统网络.使用系统。集合。通用；使用系统。文字；使用数据数据使用数据属性；公共类TestHandler : IHttpHandler { Httprequest Request；超文本传送协议（Hyper Text Transport Protocol的缩写）响应响应；公共无效进程请求(HttpContext上下文){ //不让浏览器缓存语境。响应。缓冲=真；语境。响应到期时间=日期时间.现在。AddDays(-1)；语境回应。AddHeader('pragma '，'无缓存');语境。响应AddHeader('cache-control '，' ')；语境。响应CacheControl="无缓存";语境。响应。内容类型='文本/纯文本；请求=上下文。请求；响应=上下文。回应；字符串方法=请求['方法']。ToString()；系统。反射GetType().GetMethod(方法);方法信息调用(这个，null)；} public void GetModuleInfo(){ StringBuilder sb=new StringBuilder()；字符串jsonData=字符串.空的；列表模块lsModule=模块全部.GetModuleList()；某人(某人的简写)追加(' { '模块' :[');for(int I=0；i lsModule .计数；I){ JSondata=' { ' module eenum ' : ' ' ' LSModule[I].ModuleNum ' '， ' ModuleName ' : ' ' ' lsModule[I].ModuleName ' ' '， ' module dess ' : ' ' ' LSmodule[I].ModuleDes ' ，'；某人(某人的简写)追加(JSondata)；} if (lsModule .数0)某人=某人。除掉（某人)长度- 1,1);某人(某人的简写)追加(']} ');回应。给（某人)写信；} public bool IsReuse { get { return false；} }}以上代码超简单吧，JQuery Ajax动态生成桌子表格的内容就全部完成了，希望对大家有所帮助。