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表格的内容就全部完成了，希望对大家有所帮助。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了Ajax 入门之 GET 与 POST 的不同处详解,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了基于Ajax技术实现无刷新用户登录功能,非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-01-01
这篇文章主要教大家简单实现ajax三级联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了Ajax返回值类型与用法,结合实例形式分析了ajax返回值的xml类型与文本类型详细分类、用法与相关操作注意事项,需要的朋友可以参考下2019-07-07
Ajax异步传输想必大家并不陌生吧，下面为大家介绍下与PHP实现交互的示例，大家不要错过2014-01-01
jQuery AJAX中readyState与status的区别与联系
这篇文章主要介绍了 jQuery AJAX中readyState与status的区别与联系,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
今天小编就为大家分享一篇json获取数据库的信息在前端页面显示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-05-05
菜鸟蔡之Ajax复习第二篇(JQuery中的load()方法实现Ajax功能)
在上一篇博客中写到的是在传统的Javascript中使用XMLHttpRequest对象异步加载数据的，唉，童鞋.......看到那些代码是不是有点头疼啊!呵呵......2012-11-11
这篇文章主要介绍了用ajax实现读博客rss的具体实现，需要的朋友可以参考下2014-05-05
AJAX 进度条实现代码，基于java后来，大家可以学习下。2009-09-09
最新评论