前言：
本示例大概功能是前台通过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实现动态添加表格tr td功能 在进行Web开发时，我们经常需要动态地从服务器获取数据，并将这些数据展示在网页上。表格是展示这些数据的一种常见形式。本文将详细解析使用jQuery和ajax技术来实现动态...
在IT行业中，动态生成...总的来说，FaceTest项目展示了如何通过存储过程获取数据，用JSON传输，再利用jQuery在前端动态生成表格和实现分页效果。这种模式在现代Web开发中非常常见，能够提高数据展现的效率和用户体验。
实现过程是这样的：前台通过jquery的ajax调用一般处理程序(Handler),获取表格需要显示的信息，然后转换成json格式返回给前台，前台获取到数据后循环构建表格的行，最好把行附加到表里。感兴趣的朋友一起看看吧
这个主题"jQuery json动态数据表格分页代码"聚焦于使用jQuery、PHP和AJAX来实现这一功能。以下是相关知识点的详细说明： 1. **jQuery**：jQuery是一个流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画和...
我们使用jQuery选择器获取这个表格，并在AJAX请求成功后，将服务器返回的数据插入到表格中。假设服务器返回的是JSON格式的数据，我们可以使用`$.each()`遍历数据，然后用`$('<tr>...</tr>')`创建新的行元素，再将...
在本主题中，我们将深入探讨如何使用jQuery动态控制表格的行，包括增加行、选中行和删除行。这在构建数据驱动的Web应用时尤其重要，因为用户通常需要与表格进行交互，例如查看、编辑或删除数据。 首先，让我们讨论...
- **填充数据**：通过遍历数据集，可以动态生成表格行和单元格，将数据填入表格。例如： ```javascript var data = [['Name', 'Age'], ['John', 30], ['Jane', 25]]; var table = $('<table>'); $.each(data, ...
【ASP + jQuery AJAX 实例源码详解】 ASP (Active Server Pages) 是微软开发的一种服务器端脚本语言，常用于构建动态网页。jQuery 是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画以及AJAX交互。AJAX...
总的来说，"jQuery分页动态数据表格插件.zip"是一个用于构建高效、交互性强的Web数据展示工具，它利用jQuery的强大功能，结合Ajax和CSS，实现了数据的动态加载、分页显示以及丰富的用户交互。开发者可以根据自身需求...
《jPage：jQuery AJAX表格动态分页实现详解》 在网页开发中，数据展示往往涉及到大量的数据处理，尤其是在用户交互时，如何优雅地处理大量数据的分页展示，成为了提升用户体验的关键。jPage是一款基于jQuery的插件...
总的来说，这个压缩包提供了使用jQuery和JSON动态生成表格的示例，包括从服务器获取数据、动态创建和更新表格、以及实现表格行的折叠和展开功能。这些技术对于开发响应式、交互性强的网页界面非常有用。
2. 数据展示：利用jQuery对HTML元素进行操作，动态生成表格结构，展示从服务器返回的数据。这可能涉及到遍历JSON数据、创建`<tr>`和`<td>`元素等操作。 3. 动态加载：当用户滚动到表格底部时，可以触发新的AJAX请求...
本文将深入探讨如何使用jQuery创建动态表格，这是一个常见的需求，特别是在数据展示和用户交互丰富的Web应用中。 首先，让我们理解动态表格的基本概念。动态表格指的是在网页加载后或用户操作时根据需要生成或更新...
本教程将详细讲解如何使用jQuery来实现一个类似于淘宝商品详情页中的多规格SKU（库存保持单位）功能，帮助开发者自动生成表格表单，以便用户在选择商品时能方便地选取不同的属性组合。 首先，我们需要理解SKU的概念...
通过这种方式，我们可以利用jQuery动态地生成表格，而无需在HTML中硬编码数据。这种方法的优点在于，当数据源发生变化时，只需更新JavaScript数组即可，不需要修改HTML，提高了代码的可维护性和灵活性。 此外，这个...
示例中通过createShowingTable函数展示了如何根据从服务器返回的数据动态生成表格。函数首先创建了一个字符串变量tableStr，并将其构建为一个HTML表格的初始结构。接着，通过for循环根据返回数据数组的长度构建每一...
3. jQuery动态生成表单：利用jQuery的append()方法，根据业务需求动态生成表单元素。例如，创建一个输入框和提交按钮。 ```javascript var formData = [ { type: 'text', label: '姓名', name: 'username' }, { ...
在这个“jquery实现生成表格”的主题中，我们将深入探讨如何利用jQuery来动态创建和操作表格元素，以便在网页上根据用户需求生成表格。 首先，我们需要理解HTML表格的基本结构，它由`<table>`标签作为容器，`<tr>`...