天天无用

要用最简单的方法解决最实际的问题

刘强ID：luq885
共40210次访问，排名2738(-1)好友5人，关注者18人
太懒
luq885的文章
原创 18 篇
翻译 0 篇
转载 8 篇
评论 36 篇
天天无用的公告

本博客所有原创文章版权归本人所有，如欲转载或用于商业请先联系本人。

最近评论
eleph：我的是VS2003 该怎么办呀,刚试了一下,你的代码.在我这上面好像不行样.
xqxujun：好像不通用啊，，
鱼鱼：能不能加上自动选择搜索出来的第一个为默认值？
dmm_2008：你好呀..能发我个JSP的例子吗.


dongming_9431@163.com
sean_xxrs：在PHP里怎么实现啊？
文章分类
收藏
相册
链接
『 天道酬勤 』(RSS)
Dflying Chen(RSS)
听棠.NET(RSS)
存档
软件项目交易
订阅我的博客
XML聚合  FeedSky
订阅到鲜果
订阅到Google
订阅到抓虾
订阅到BlogLines
订阅到Yahoo
订阅到GouGou
订阅到飞鸽
订阅到Rojo
订阅到newsgator
订阅到netvibes

原创 基于jQuery的AJAX和JSON实现纯html数据模板收藏

新一篇: 用jQuery实现asp.net 2.0 treeview控件完全无刷新操作实例(AJAX的增、删、改、选择以及展开收缩节点) | 旧一篇: 自己写的DataTable转换成JSON字符串的函数
        通过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。
我们先来看一下html模板：
            <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
                <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>
            </table>
  
        一定要注意的就是里面所有的id属性，这个是一个关键。再来看一下AJAX请求和绑定数据的代码。
        $.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 + "&pageindex="+pageIndex+">&nbsp;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代码如下：
<!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>
    <title>test1</title>

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

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

</head>
<body>
    <div>
        &nbsp;<div>
            <br />
            <input id="first" type="button" value="  <<  " /><input id="previous" type="button"
                value="  <  " /><input id="next" type="button" value="  >  " /><input id="last" type="button"
                    value="  >>  " />
            &nbsp;<span id="pageinfo"></span>
            <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
                <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>
            </table>
        </div>
        <div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red">
            LOADING....
        </div>
        <input type="hidden" id="pagecount" />
    </div>
</body>
</html>
    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>
    还是要注意id属性。大家看到这里应该明白了，不管用什么样的表现形式，只要id属性相同，就可以把数据绑定到对应的位置。这样的话，我们这些做程序的就不会因为美工的修改而修改代码了，而且美工也只要做出html就可以了，不需要为服务器控件做模板（不过我还没遇到过这样的美工，都是美工设计好了我来改成服务器控件的模板）。
    再简单说一下AJAX请求的后台，用的是Access的Northwind数据库，把订单表放到DataTable里，然后通过DataTable2JSON（http://blog.csdn.net/luq885/archive/2007/06/05/1639853.aspx）转化成JSON数据格式传回来就完了，不过后台用了一些分页和缓存的方法，希望对初学者有一些帮助。
    全部例子到http://www1.51ok.com/down.do?7A5EFE8D0FD43CDF61D8980635F8708A下载，其中test.htm是用table模板实现的，test2.htm是用ul模板实现的。效果如下：
test.htm
test2.htm

发表于 @ 2007年06月06日 00:35:00|评论(loading...)|编辑

新一篇: 用jQuery实现asp.net 2.0 treeview控件完全无刷新操作实例(AJAX的增、删、改、选择以及展开收缩节点) | 旧一篇: 自己写的DataTable转换成JSON字符串的函数

评论

#mc1035 发表于2007-07-27 10:20:42  IP: 60.208.111.*
为什么一定要将返回的数据格式转换成json格式啊？？？有什么好处么？个人认为可以将返回的数据直接格式化成xml格式的，方法有很多，原来在做java时我是自己封装的一个转换类，现在改C#了，觉得C#中好像DataSet可以直接转XML吧，这样你只需要将JQUERY里的dataType设置成xml格式的即可了，你可以试试，我也试试，因为我C#刚开始看
2007-07-28 09:43:21作者回复
json格式相对与xml格式要数据量要小一些，而且json格式在javascript里面可以直接使用，不用解析的。当然用xml格式也可以，jquery解析xml也比较方便
#pagecoder 发表于2007-08-01 12:21:24  IP: 210.51.173.*
这篇文章不错, 我转载一下 :)
2007-08-01 14:26:00作者回复
转载请写明出处和作者，要是能让更多的人用的到，我是欢迎转载的
#xuanyuancl 发表于2007-11-21 20:20:47  IP: 60.176.246.*
我才开始了解jquery,问下作者jquery可以直接调用后台方法吗？难不成只能传参数（什么key=1代表返回什么样的数据）？
2007-11-23 00:26:27作者回复
jquery只是一个JavaScript library,它的ajax方法也只是对XMLHttpRequest 对象的一个包装，能够方便我们更简单的使用而已。它并不是.net专用的，而是让我们有一种更简单的方式来使用javascript。当然想直接调用后台方法不是做不到，只要能发出调用后台方法的请求就可以。可以看一下这里http://bbs.jquery.org.cn/thread-1497-1-1.html，已经有高手做出了可以直接调用webservice的插件，我想应该能满足你的要求。
#kevin 发表于2008-04-21 17:48:35  IP: 60.12.235.*
能否在文章中贴出json数据？
我遇到一个问题，FF2可以通过，IE7不通过，大概是不能识别length方法。代码如下。我的邮箱bit.kevin@gmail.com

var data = [{"LinkId":"1","LinkClickTimes":"1","Href":"http:\/\/www.bitfx.org\/","Name":"\u98de\u7fd4

\u8bba\u575b"},{"LinkId":"18","LinkClickTimes":"1","Href":"http:\/\/vod.bit.edu.cn\/","Name":"\u89c6

\u542c\u7a7a\u95f4"},{"LinkId":"28","LinkClickTimes":"1","Href":"http:\/\/music.bitnp.net\/","Name":"

\u627e\u4e50\u7f51"},{"LinkId":"3","LinkClickTimes":"1","Href":"http:\/\/www.bitunion.org\/","Name":"FTP

\u8054\u76df"}];

$.each(
data,
function( i , n) {
row = li.clone();
row.find('a').attr('href' , n.Href);
row.find('a').attr('title' , n.Name);
row.find('a').html( n.Name );

row.appendTo("#userCustom ul");
}

);
2008-05-27 11:08:45作者回复
我就是用IE7测试做的呀，FF2只是测试了一下，应该都可以的，不知道具体错误是什么
#阿草哥 发表于2008-04-24 16:01:55  IP: 221.122.46.*
例子下不了 能否发一份给我
sunxianchao@gmail.com
2008-05-27 11:10:32作者回复
不好意思，很久没看这里了<br />例子可以从这里下载，希望还有用<br />http://download.csdn.net/user/luq885
#sean_xxrs 发表于2008-04-28 18:45:21  IP: 61.141.242.*
在PHP里怎么实现啊？
2008-05-27 11:34:06作者回复
文章里只是写到页面上如何用js来控制，并没有写后台的实现。<br />其实只要后台返回如下格式的json数据就可以，这里就是用纯文本处理的方式直接输出的<br /><br />{"table":[{"订单ID":"11077","客户ID":"RATTC","雇员ID":"1","订购日期":"1998-5-6 0:00:00","到货日期":"1998-6-3 0:00:00","发货日期":"","运货商":"2","运货费":"8.53","货主名称":"王先生","货主地址":"宽石西路 37 号","货主城市":"深圳","货主地区":"华南","货主邮政编码":"871100","货主国家":"中国"},{"订单ID":"11076","客户ID...
发表评论  


登录
Csdn Blog version 3.1a
Copyright © 天天无用