`
silenceisall
  • 浏览: 31354 次
  • 性别: Icon_minigender_1
  • 来自: 湖北
社区版块
存档分类
最新评论

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

AjaxHTMLjsonjQueryAccess 
阅读更多
通过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数据格式传回来就完了，不过后台用了一些分页和缓存的方法，希望对初学者有一些帮助.
分享到：
| java.sql.Date、java.util.Date与数据库中 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery实现的纯HTML模板进行ajax数据绑定

    标题中的“jQuery实现的纯HTML模板进行ajax数据绑定”指的是使用jQuery库来处理HTML模板，并通过AJAX技术动态地从服务器获取JSON数据，然后将这些数据绑定到模板中，实现页面内容的动态更新，无需刷新整个页面。...

    jquery与json和ajax的结合

    ### jQuery与JSON及AJAX的结合应用 ...开发者可以利用jQuery强大的选择器和DOM操作能力，方便地实现数据绑定，同时通过AJAX技术实现无刷新页面的数据更新。这对于现代Web应用而言是非常有价值的。

    基于jQuery的AJAX和JSON的实例.doc

    利用jQuery的AJAX功能，可以直接访问后台获取JSON格式的数据，并通过简单的JavaScript代码将这些数据绑定到HTML模板上，从而实现在页面上的动态显示。这种方式不仅提高了用户体验，也增强了Web应用的功能性。对于...

    基于jQuery的AJAX和JSON的实例.docx

    在本文档中，我们将深入探讨如何使用jQuery进行AJAX与...通过AJAX，我们可以实现动态加载和更新内容，而JSON则提供了一种高效的数据交换方式。这样的技术组合在Web开发中广泛应用，尤其是构建富交互性的用户界面时。

    jQuery实现的纯HTML模板进行ajax数据绑定-m.

    此外，jQuery还提供了`.load()`和`.get()`方法，它们是`.ajax()`的简化版本，适用于快速实现数据加载。例如，`.get()`可以这样使用： ```javascript $.get('http://example.com/api/data', function(data) { // ...

    jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

    主要介绍了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作,结合实例形式分析了jQuery+Ajax请求json格式数据并渲染到html页面相关步骤与操作技巧,需要的朋友可以参考下

    Struts2+Jquery+ajax+Json代码案例

    总结来说，这个案例展示了如何利用Struts2作为后端控制器处理业务逻辑，jQuery简化前端交互，Ajax实现异步通信，以及JSON作为数据交换格式，共同构建一个高效、动态的Web应用程序。通过深入理解这些技术，开发者能够...

    ajax（jquery+json）实现前端无刷新分类管理源码

    **Ajax（Asynchronous JavaScript and XML）技术是一种在无需重新...总之，这个源码提供了一个很好的学习和参考实例，展示了如何结合Ajax、jQuery和JSON实现前端无刷新的分类管理，对于提升前端开发技能非常有帮助。

    Struts2+jQuery（不用JSON）实现局部刷新

    - **Struts2的JSON插件**：虽然题目要求不使用JSON，但通常情况下，Struts2通过JSON插件返回数据给jQuery是最方便的方式。不过，我们可以通过设置Content-Type为"text/plain"或"text/html"，让Struts2返回非JSON...

    有ajax，jquery实现tab效果

    在`tab+ajax`的压缩包文件中，可能包含了一个示例代码或者模板，用于演示如何使用Ajax和jQuery实现Tab效果。解压后，你可以查看其中的HTML、CSS和JavaScript文件，学习并理解其工作原理。此外，可能还包含了详细的...

    ssh整合+JSON+Jquery+Ajax

    4. **数据持久化**：Hibernate负责将Java对象与数据库中的记录对应，实现数据的CRUD（创建、读取、更新、删除）操作。 5. **数据传输**：使用JSON格式在前后端之间传递数据，提高传输效率和解析速度。 6. **视图层...

    struts2+json+ajax+jquery

    总结来说，Struts2提供了后台处理和视图控制，JSON负责数据传输，Ajax实现了无刷新交互，而jQuery简化了这一过程。这种组合在Web开发中极其常见，是构建动态、高效Web应用的重要工具。理解并熟练掌握这四者之间的...

    基于Python Django框架的jQuery AJAX交互源码实现

    项目概述：本项目是基于Python中流行的Django框架，结合jQuery AJAX技术实现的前后端交互应用。通过使用POST和GET请求，实现了数据的异步处理。项目主要采用Python语言编写，同时包含了JavaScript、HTML、Shell、CSS...

    网页模板——jQuery查看json格式数据插件viewer.js.zip

    网页模板中的jQuery查看JSON格式数据插件`viewer.js`是一个非常实用的工具，它使得开发者和用户能够在浏览器中直观地查看和理解JSON数据结构。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，广泛...

    基于JQuery实现数据展示方面基本特效

    总结来说，基于jQuery实现数据展示的基本特效涵盖了DOM操作、动画效果、Ajax数据交互、事件处理和第三方插件的使用。结合SpringMVC，可以构建出响应式、动态且互动性强的数据展示界面。通过学习和掌握这些知识点，...

    Struct2利用Ajax,JQuery交互Json

    以上就是Struct2如何结合Ajax、JQuery和Json实现数据交互的基本过程。通过这种方式，我们可以创建更加动态、高效的Web应用，提高用户体验。在实际开发中，还需要考虑错误处理、安全性和性能优化等问题，确保应用的...

    运用Jquery插件Json2Template写的简单项目

    Json2Template是一款基于jQuery的库，它允许开发者将JSON数据动态渲染为HTML模板，极大地提高了前端界面的数据展示效率。在学习和应用这个插件的过程中，我们可能会遇到各种挑战，但通过实践和理解其核心原理，可以...

    AJAX+ Jquery + JSON + PHP

    在本项目中，AJAX 结合了 jQuery 和 PHP，以及 JSON 数据格式，实现了高效的数据交互。 jQuery 是一个轻量级的 JavaScript 库，它简化了 JavaScript 的使用，提供了丰富的选择器、动画效果和事件处理等功能。在 ...

Magicbox
Global site tag (gtag.js) - Google Analytics