JQuery Ajax动态生成Table表格

 更新时间:2015年09月22日 09:53:08   作者:忧忧夏天  
实现过程是这样的:前台通过jquery的ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里。感兴趣的朋友一起看看吧

前言:

  本示例大概功能是前台通过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" %>
<!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">
    //获取发布模块类型
    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;
    List<Module> 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表格的内容就全部完成了,希望对大家有所帮助。

相关文章

  • Django框架如何使用ajax的post方法

    Django框架如何使用ajax的post方法

    Django是一个开放源代码的Web应用框架,由Python写成,本文给大家介绍Django框架如何使用ajax的post方法,感兴趣的朋友跟着小编一起来学习学习吧
    2015-09-09
  • jquery ajax多次请求数据时 不刷新问题的解决方法

    jquery ajax多次请求数据时 不刷新问题的解决方法

    下面小编就为大家带来一篇jquery ajax多次请求数据时 不刷新问题的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • ajax中data传参的两种方式分析

    ajax中data传参的两种方式分析

    这篇文章主要介绍了ajax中data传参的两种方式,结合实例形式简单分析了ajax参数传递的POST与GET方式,非常简单实用,需要的朋友可以参考下
    2015-12-12
  • HTML5 Ajax文件上传进度条如何显示

    HTML5 Ajax文件上传进度条如何显示

    这篇文章主要介绍了HTML5 Ajax文件上传进度条是如何显示的,基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • Ajax请求二进制流进行处理(ajax异步下载文件)的简单方法

    Ajax请求二进制流进行处理(ajax异步下载文件)的简单方法

    最近做项目遇到这样的需求:管理后台需要随时下载数据报表,数据要实时生成后转换为excel下载。怎么解决这个问题呢?下面小编给大家分享Ajax请求二进制流进行处理(ajax异步下载文件)的简单方法,一起看看吧
    2017-09-09
  • 好用的AJAX类代码分享

    好用的AJAX类代码分享

    好用的AJAX类代码分享,需要的朋友可以参考下。
    2011-11-11
  • AJAX页面状态保持思路详解

    AJAX页面状态保持思路详解

    AJAX流行的时候,很多信息为AJAX异步请求,比如:点击、翻页等。通常这种情况你一刷新浏览器,当前页面就会重置到初始状态。更不用说把看到的信息url发给好友了。下面给大家分享实现思路,一起看看吧
    2017-03-03
  • Baidu Musicbox 用到的ajax代码

    Baidu Musicbox 用到的ajax代码

    Baidu Musicbox 用到的ajax代码...
    2007-09-09
  • Ajax中浏览器的缓存问题解决方法

    Ajax中浏览器的缓存问题解决方法

    我们在做项目中,一般提交请求都会通过ajax来提交,但是测试的时候发现,每次提交后得到的数据都是一样的,调试可以排除后台代码的问题,所以问题肯定是出在前台
    2013-06-06
  • Ajax实现智能提示搜索功能

    Ajax实现智能提示搜索功能

    这篇文章主要为大家详细介绍了Ajax实现智能提示搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08

最新评论