- 网上转载
- 页面代码
- <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MyTestWebApp.JsonData.Default" %>
- <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
- <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- <pre name="code" class="javascript">$(document).ready(function () {
- $.ajax({
- type: "get",
- dataType: "Json",
- url: "JsonHandler.ashx",
- start: function () { alert("开始获取数据了") },
- complete: function () { alert("获取完了") },
- success: function (data) {
- var t = eval(data); //强制转换一下json字符串,生成json对象
- $.each(t, function (i, n) {
- var row = $("#template").clone(); //克隆模板,创建一个新数据行
- for (attribute in n) {
- row.find("#" + attribute).html(n[attribute]); //循环json对象的属性,并赋值到数据行中对应的列,此处列的id就是相应的属性名称
- }
- row.appendTo($("#testTable"));
- });
- }
- });
- });
</script></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"><table id="testTable"> <th>编号</th><th>标题</th><th>内容</th> <!--数据模板--> <!--其中每一列的id就是对应记录中的列名--> <tr id="template"><td id="Id"></td><td id="title"></td><td id="content"></td></tr> <!--数据模板--></table></asp:Content>
一般处理页面代码:
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using MyTestWebApp.Code;
- using System.Data;
- namespace MyTestWebApp.JsonData
- {
- /// <summary>
- /// JsonHandler 的摘要说明
- /// </summary>
- public class JsonHandler : IHttpHandler
- {
- public void ProcessRequest(HttpContext context)
- {
- context.Response.ContentType = "text/javascript";
- DataTable table = SqlHelper.ExecuteDataset(SqlHelper.connectionString, CommandType.Text, "select Id, title, content from Accordion").Tables[0];
- context.Response.Write(JSONHelper.DataTableToJSON(table));
- }
- public bool IsReusable
- {
- get
- {
- return false;
- }
- }
- }
- }