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

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

我们先来看一下html模板：

<!--[if !vml]--><!--[endif]-->            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>

<!--[if !vml]--><!--[endif]-->

  

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

<!--[if !vml]--><!--[endif]-->

<!--[if !vml]--><!--[endif]-->      JavaScript代码

查看源代码

打印

01.$.ajax(...{

02.            type: "get",//使用get方法访问后台

03.            dataType: "json",//返回json格式的数据

04.            url: "BackHandler.ashx",//要访问的后台地址

05.            data: "pageIndex=" + pageIndex,//要发送的数据

06.            complete :function()...{$("#load").hide();},//AJAX请求完成时隐藏loading提示

07.            success: function(msg)...{//msg为返回的数据，在这里做数据绑定

08.                var data = msg.table;

09.                $.each(data, function(i, n)...{

10.                    var row = $("#template").clone();

11.                    row.find("#OrderID").text(n.订单ID);

12.                    row.find("#CustomerID").text(n.客户ID);

13.                    row.find("#EmployeeID").text(n.雇员ID);

14.                    row.find("#OrderDate").text(ChangeDate(n.订购日期));

15.                    if(n.发货日期!== undefined) row.find("#ShippedDate").text(ChangeDate(n.发货日期));

16.                    row.find("#ShippedName").text(n.货主名称);

17.                    row.find("#ShippedAddress").text(n.货主地址);

18.                    row.find("#ShippedCity").text(n.货主城市);

19.                    row.find("#more").html("<A href='OrderInfo.aspx?id="' n.订单id=""> More</A>");                    

20.                    row.attr("id","ready");//改变绑定好数据的行的id

21.                    row.appendTo("#datas");//添加到模板的容器中

22.                });

<!--[if !vml]--><!--[endif]-->

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

       

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

<!--[if !vml]--><!--[endif]-->HTML代码

查看源代码

打印

1.<script language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"></script>

2.<script language="javascript" type="text/javascript" src="js/PageDate.js"></script>

3.<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>

<!--[if !vml]--><!--[endif]-->

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

<!--[if !vml]--><!--[endif]-->            <ul id="datas">



<!--[if !vml]--><!--[endif]-->                <li id="template">



<!--[if !vml]--><!--[endif]-->                    <span id="OrderID">



<!--[if !vml]--><!--[endif]-->                        fsdfasdf



<!--[if !vml]--><!--[endif]-->                    </span>



<!--[if !vml]--><!--[endif]-->                    <span id="CustomerID">



<!--[if !vml]--><!--[endif]-->                    </span>



<!--[if !vml]--><!--[endif]-->                    <span id="EmployeeID">



<!--[if !vml]--><!--[endif]-->                    </span>



<!--[if !vml]--><!--[endif]-->                    <span id="OrderDate">



<!--[if !vml]--><!--[endif]-->                    </span>



<!--[if !vml]--><!--[endif]-->                    <span id="ShippedDate">



<!--[if !vml]--><!--[endif]-->                    </span>



<!--[if !vml]--><!--[endif]-->                    <span id="ShippedName">



<!--[if !vml]--><!--[endif]-->                    </span>



<!--[if !vml]--><!--[endif]-->                    <span id="ShippedAddress">



<!--[if !vml]--><!--[endif]-->                    </span>



<!--[if !vml]--><!--[endif]-->                    <span id="ShippedCity">



<!--[if !vml]--><!--[endif]-->                    </span>



<!--[if !vml]--><!--[endif]-->                    <span id="more">



<!--[if !vml]--><!--[endif]-->                    </span>



<!--[if !vml]--><!--[endif]-->                </li>



<!--[if !vml]--><!--[endif]-->            </ul>

把datatable直接序列化为json:

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

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

<!--[if !vml]--><!--[endif]-->    Java代码

查看源代码

打印

01.private string DataTable2Json(DataTable dt)

02.    ...{

03.        StringBuilder jsonBuilder = new StringBuilder();

04.        jsonBuilder.Append("{\"");

05.        jsonBuilder.Append(dt.TableName);

06.        jsonBuilder.Append("\":[");

07.        for (int i = 0; i < dt.Rows.Count; i++)

08.        ...{

09.            jsonBuilder.Append("{");

10.            for (int j = 0; j < dt.Columns.Count; j++)

11.            ...{

12.                jsonBuilder.Append("\"");

13.                jsonBuilder.Append(dt.Columns[j].ColumnName);

14.                jsonBuilder.Append("\":\"");

15.                jsonBuilder.Append(dt.Rows[i][j].ToString());

16.                jsonBuilder.Append("\",");

17.            }

18.            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);

19.            jsonBuilder.Append("},");

20.        }

21.        jsonBuilder.Remove(jsonBuilder.Length - 1, 1);

22.        jsonBuilder.Append("]");

23.        jsonBuilder.Append("}");

24.        return jsonBuilder.ToString();

25.    }

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

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

 

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

查看源代码

打印

01.      

02.    <script type=”text/javascript” src=”js/jquery-1.2.1.pack.js”></script>

03.<script type=”text/javascript”>

04.    $(document).ready(function (){

05.        $(”#btnOK”).click(function (){

06.            $.getJSON(

07.                “Handler.ashx”,

08.                {},

09.                function(json){

10.                    $(”#list”).append(”<LI>id:”+json.EmployeeId+”|Name:”+json.EmployeeName+”| 年龄:”+json.EmployeeInfo[0]+”|身高:”+json.EmployeeInfo[1]+”|体 重:”+json.EmployeeInfo[2]+”</LI>”);

11.                }

12.            )

13.        })

14.    })

15.</script>

16.  

17.    <INPUT id=”btnOK” value=”加载数据” type=”button”/>

 

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

查看源代码

打印

01.<%@ WebHandler Language=”C#” Class=”Handler” %>

02.  

03.using System;

04.using System.Web;

05.using System.Web.UI.HtmlControls;

06.using System.Runtime.Serialization;

07.using Newtonsoft.Json;

08.  

09.public class Handler : IHttpHandler {

10.     

11.    public void ProcessRequest (HttpContext context) {

12.        context.Response.ContentType = “text/plain”;

13.        context.Response.Write(ReturnResult()); 

14.    }

15.  

16.    public string ReturnResult() {

17.        Employee employee = new Employee();

18.        employee.EmployeeId = 1;

19.        employee.EmployeeName = “yang”;

20.        employee.EmployeeInfo = “25,170cm,55kg”.Split(’,');

21.        string jsonstr = JavaScriptConvert.SerializeObject(employee);

22.        return jsonstr;

23.    }

24.    public bool IsReusable {

25.        get {

26.            return false;

27.        }

28.    }

29.  

30.    class Employee

31.    {

32.        public int EmployeeId;

33.        public string EmployeeName;

34.        private string[] employeeInfo;

35.        public string[] EmployeeInfo

36.        {

37.            get { return employeeInfo; }

38.            set { employeeInfo = value; }

39.        }

40.    }

41.}