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

2011-04-28 08:17 沐海阅读(5574) 评论(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; } 

        } 

    } 

}

分类 Jquery