JQuery Ajax动态生成Table表格

前言：

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

目标：

a 熟悉简单JQuery Ajax的使用

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

c 熟悉下handler的基本用法

1 简单效果图

2 前台代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DialogAjax.aspx.cs" Inherits="JQueryTest_DialogAjax" %>



  
  
  
  
  
  


  

  

    
  
  

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;
    List 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动态生成Table表格的内容就全部完成了，希望对大家有所帮助。