基于jQuery的AJAX和JSON实现纯html数据模板

2011-04-28 08:17 沐海阅读(5657) 评论(0) 编辑收藏举报

通过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。

我们先来看一下html模板：

HTML代码

1.<TABLE style="BORDER-COLLAPSE: collapse" id=datas border=1 cellSpacing=0><TBODY><TR><TH>订单ID</TH><TH>客户ID</TH><TH>雇员ID</TH><TH>订购日期</TH><TH>发货日期</TH><TH>货主名称</TH><TH>货主地址</TH><TH>货主城市</TH><TH>更多信息</TH></TR><TR id=template><TD id=OrderID> </TD><TD id=CustomerID> </TD><TD id=EmployeeID> </TD><TD id=OrderDate> </TD><TD id=ShippedDate> </TD><TD id=ShippedName> </TD><TD id=ShippedAddress> </TD><TD id=ShippedCity> </TD><TD id=more> </TD></TR></TBODY></TABLE>

一定要注意的就是里面所有的id属性，这个是一个关键。再来看一下AJAX请求和绑定数据的代码。

JavaScript代码

$.ajax(...{ 
            type: "get",//使用get方法访问后台 
            dataType: "json",//返回json格式的数据 
            url: "BackHandler.ashx",//要访问的后台地址 
            data: "pageIndex=" + pageIndex,//要发送的数据 
            complete :function()...{$("#load").hide();},//AJAX请求完成时隐藏loading提示 
            success: function(msg)...{//msg为返回的数据，在这里做数据绑定 
                var data = msg.table; 
                $.each(data, function(i, n)...{ 
                    var row = $("#template").clone(); 
                    row.find("#OrderID").text(n.订单ID); 
                    row.find("#CustomerID").text(n.客户ID); 
                    row.find("#EmployeeID").text(n.雇员ID); 
                    row.find("#OrderDate").text(ChangeDate(n.订购日期)); 
                    if(n.发货日期!== undefined) row.find("#ShippedDate").text(ChangeDate(n.发货日期)); 
                    row.find("#ShippedName").text(n.货主名称); 
                    row.find("#ShippedAddress").text(n.货主地址); 
                    row.find("#ShippedCity").text(n.货主城市); 
                    row.find("#more").html("<A href='OrderInfo.aspx?id="' n.订单id=""> More</A>");                     
                    row.attr("id","ready");//改变绑定好数据的行的id 
                    row.appendTo("#datas");//添加到模板的容器中 
                });

这个是jQuery的AJAX方法，返回数据并不复杂，主要说明一下怎么把数据按模板的定义显示到到页面上。首先是这个“var row = $("#template").clone();”先把模板复制一份，接下来row.find("#OrderID").text(n.订单ID);，表示找到id=OrderID的标记，设置它的innerText为相应的数据，当然也可以设置为html格式的数据。或者是通过外部的函数把数据转换成需要的格式，比如这里row.find("#OrderDate").text(ChangeDate(n.订购日期));有点服务器控件做模板绑定数据的感觉。

所有的这些，都是放在一个静态的页面里，只通过AJAX方法从后台获取数据，所有html代码如下：

HTML代码

<script language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"></script> 
<script language="javascript" type="text/javascript" src="js/PageDate.js"></script> 
<DIV> <DIV><BR>             <INPUT id=first value="  <<  " type=button><INPUT id=previous value="  <  " type=button><INPUT id=next value="  >  " type=button><INPUT id=last value="  >>  " type=button>                           <TABLE style="BORDER-COLLAPSE: collapse" id=datas border=1 cellSpacing=0><TBODY><TR><TH>订单ID</TH><TH>客户ID</TH><TH>雇员ID</TH><TH>订购日期</TH><TH>发货日期</TH><TH>货主名称</TH><TH>货主地址</TH><TH>货主城市</TH><TH>更多信息</TH></TR><TR id=template><TD id=OrderID> </TD><TD id=CustomerID> </TD><TD id=EmployeeID> </TD><TD id=OrderDate> </TD><TD id=ShippedDate> </TD><TD id=ShippedName> </TD><TD id=ShippedAddress> </TD><TD id=ShippedCity> </TD><TD id=more> </TD></TR></TBODY></TABLE></DIV>         <DIV style="POSITION: absolute; BACKGROUND-COLOR: red; TOP: 0px; LEFT: 0px" id=load>LOADING....</DIV>         <INPUT id=pagecount type=hidden></DIV>

PageData.js就是包括上面AJAX请求和绑定数据代码的js，整个页面连form都不用，这样做有什么好处呢。再看下面一个模板

<ul id="datas">

                <li id="template">

                    <span id="OrderID">

                        fsdfasdf

                    </span>

                    <span id="CustomerID">

                    </span>

                    <span id="EmployeeID">

                    </span>

                    <span id="OrderDate">

                    </span>

                    <span id="ShippedDate">

                    </span>

                    <span id="ShippedName">

                    </span>

                    <span id="ShippedAddress">

                    </span>

                    <span id="ShippedCity">

                    </span>

                    <span id="more">

                    </span>

                </li>

            </ul>

把datatable直接序列化为json:

用Newtonsoft.Json.dll进行json序列化，这个从json的官网上就可以找到，使用比较方便。

，然后用StringBuilder来构造成JSON格式也不是很复杂。函数代码如下：

Java代码

private string DataTable2Json(DataTable dt) 
    ...{ 
        StringBuilder jsonBuilder = new StringBuilder(); 
        jsonBuilder.Append("{\""); 
        jsonBuilder.Append(dt.TableName); 
        jsonBuilder.Append("\":["); 
        for (int i = 0; i < dt.Rows.Count; i++) 
        ...{ 
            jsonBuilder.Append("{"); 
            for (int j = 0; j < dt.Columns.Count; j++) 
            ...{ 
                jsonBuilder.Append("\""); 
                jsonBuilder.Append(dt.Columns[j].ColumnName); 
                jsonBuilder.Append("\":\""); 
                jsonBuilder.Append(dt.Rows[i][j].ToString()); 
                jsonBuilder.Append("\","); 
            } 
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1); 
            jsonBuilder.Append("},"); 
        } 
        jsonBuilder.Remove(jsonBuilder.Length - 1, 1); 
        jsonBuilder.Append("]"); 
        jsonBuilder.Append("}"); 
        return jsonBuilder.ToString(); 
    }

这一行“jsonBuilder.Remove(jsonBuilder.Length - 1, 1);”是为了去掉最后一个多于的逗号，当然这个函数不能操作比较包含复杂数据类型的DataTable

jQuery操作ajax处理json数据[Demo]

Default.html前台页面代码
HTML代码

      
    <script type=”text/javascript” src=”js/jquery-1.2.1.pack.js”></script> 
<script type=”text/javascript”> 
    $(document).ready(function (){ 
        $(”#btnOK”).click(function (){ 
            $.getJSON( 
                “Handler.ashx”, 
                {}, 
                function(json){ 
                    $(”#list”).append(”<LI>id:”+json.EmployeeId+”|Name:”+json.EmployeeName+”| 年龄:”+json.EmployeeInfo[0]+”|身高:”+json.EmployeeInfo[1]+”|体 重:”+json.EmployeeInfo[2]+”</LI>”); 
                } 
            ) 
        }) 
    }) 
</script> 
  
    <INPUT id=”btnOK” value=”加载数据” type=”button”/> 

———————
Handler.ashx服务器端处理请求的代码
XHTML代码

<%@ WebHandler Language=”C#” Class=”Handler” %> 
  
using System; 
using System.Web; 
using System.Web.UI.HtmlControls; 
using System.Runtime.Serialization; 
using Newtonsoft.Json; 
  
public class Handler : IHttpHandler { 
     
    public void ProcessRequest (HttpContext context) { 
        context.Response.ContentType = “text/plain”; 
        context.Response.Write(ReturnResult());  
    } 
  
    public string ReturnResult() { 
        Employee employee = new Employee(); 
        employee.EmployeeId = 1; 
        employee.EmployeeName = “yang”; 
        employee.EmployeeInfo = “25,170cm,55kg”.Split(’,'); 
        string jsonstr = JavaScriptConvert.SerializeObject(employee); 
        return jsonstr; 
    } 
    public bool IsReusable { 
        get { 
            return false; 
        } 
    } 
  
    class Employee 
    { 
        public int EmployeeId; 
        public string EmployeeName; 
        private string[] employeeInfo; 
        public string[] EmployeeInfo 
        { 
            get { return employeeInfo; } 
            set { employeeInfo = value; } 
        } 
    } 
}

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述

沐海—化茧成蝶一只井底之蛙，你什么时候才能真正的向自己的脚下一点点的垫石头。而不是以为天下只有井口那么大。