`

jQuery Ajax异步处理Json数据详解

 
阅读更多
$.ajax({
            type: "get",//使用get方法访问后台
            dataType: "json",//返回json格式的数据
            contentType:"application/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+"> More</a>");                    
                    row.attr("id","ready");//改变绑定好数据的行的id
                    row.appendTo("#datas");//添加到模板的容器中
                });


参考:http://www.jb51.net/article/42795.htm

     http://fyq891014.blog.163.com/blog/static/20074019120123305029795/
分享到:
评论

相关推荐

    jQuery中使用Ajax获取JSON格式数据示例代码.pdf

    jQuery Ajax 异步处理 JSON 数据详解 使用 jQuery 处理 JSON 数据和其他类型的数据主要区别在于 `dataType` 的设置。当设置为 `"json"` 时,jQuery 会知道预期返回的数据是 JSON 格式,并在成功回调函数中自动将其...

    Ajax异步请求JSon数据(图文详解)

    上一篇讲了Ajax请求数据text类型,text和html都是处理比较简答的数据,而在编程过程中使用Ajax调用数据的时候,难免要进行逻辑的处理,接受的数据也变的复杂比如数组类型的数据,这时候就需要使用JSON数据类型进行...

    jQuery ajax读取json文件内容

    其中,使用jQuery的Ajax功能来读取JSON文件内容是前端开发中的常见需求,尤其在动态加载数据、实现异步交互方面发挥着重要作用。 ### 标题解析:“jQuery ajax读取json文件内容” 此标题直截了当,明确指出将通过...

    ajax+json实例

    **Ajax+JSON 实例详解** 在现代Web开发中,AJAX(Asynchronous JavaScript and XML)技术已经成为提升用户体验的重要工具,它允许网页在不刷新整个页面的情况下与服务器进行数据交互。结合JSON(JavaScript Object ...

    基于 jQuery 实现的 Ajax 异步分页

    **Ajax异步分页技术详解** 在Web开发中,用户界面的流畅性和用户体验是至关重要的。传统的网页分页通常需要用户点击下一页按钮后整个页面重新加载,这不仅消耗网络资源,而且打断了用户的浏览体验。为了解决这个...

    Jquery 封装下的ajax异步加载

    本资源提供了一个基于jQuery的AJAX异步加载的Web项目实例,通过导入MyEclipse开发环境即可运行,涉及到的主要技术包括jQuery、JSON以及Servlet。 ### jQuery中的AJAX jQuery提供了`.ajax()`函数,它是所有AJAX功能...

    Jquery Ajax 前后台数据传输

    jQuery支持多种数据格式(如JSON、XML、HTML等),并自动处理数据的序列化。例如,`dataType: 'json'`会将服务器返回的JSON数据转换为JavaScript对象。 7. **超时与取消** 可以设置`timeout`属性来定义请求的超时...

    jquery异步方式请求

    本文将深入探讨如何使用jQuery进行异步请求,这是一种非常关键的技术,它允许网页在不重新加载整个页面的情况下,通过Ajax与服务器进行数据交换,从而实现动态更新页面内容。 ### jQuery异步请求概述 jQuery的异步...

    asp+jquery ajax实例源码,添加,删除,修改,分页

    综上所述,这个"asp+jquery ajax实例源码"展示了如何利用ASP作为服务器端语言处理数据,结合jQuery的AJAX功能,实现无刷新的交互体验,优化用户在添加、删除、修改和分页操作中的浏览感受。通过学习和理解这个实例,...

    jquery Ajax 全局调用封装实例详解

    ### jQuery Ajax 全局调用封装实例详解知识点 #### 前言 在前端开发中,异步数据交互是核心功能之一,通常使用Ajax技术实现。当全站需要频繁进行数据交互时,如果每次都写重复的`$.ajax`代码,不仅效率低下,而且...

    jQuery中异步交互技术详细指南

    除了`jQuery.ajax()`之外,jQuery还提供了一些简化版的函数,如`jQuery.get()`、`jQuery.post()`以及用于处理JSON数据的`jQuery.getJSON()`等,这些函数对于常见的异步数据交互场景非常有用。 #### 参数详解 `...

    jQuery+AJAX+JSON

    使用 jQuery 发送 AJAX 请求时,如果服务器返回的是 JSON 格式的数据,jQuery 会自动将 JSON 字符串转换为 JavaScript 对象。这样可以直接操作返回的数据。 **示例代码**: ```javascript $.getJSON("data.json", ...

    Jquery Asp.net AJAX 异步通讯

    **jQuery与ASP.NET AJAX异步通信详解** 在Web开发中,AJAX(Asynchronous JavaScript and XML)技术使得页面能够在不刷新整个页面的情况下与服务器进行数据交互,极大地提升了用户体验。jQuery库简化了AJAX操作,使...

    基于json数据的jquery卡片轮播图插件

    **基于JSON数据的jQuery卡片轮播图插件详解** 在网页设计中,卡片式布局和轮播图已经成为展示信息的常见方式。为了实现这一功能,开发者通常会利用JavaScript库,如jQuery,配合HTML和CSS来创建动态效果。本文将...

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

    ### 基于jQuery的AJAX与JSON技术详解 #### 一、引言 随着Web技术的发展,用户体验的要求越来越高,而传统的网页加载方式已经不能满足快速响应的需求。为了解决这一问题,AJAX(Asynchronous JavaScript and XML)...

    jQuery_ajax异步请求

    - **带参数的Ajax异步请求**: ```javascript $.ajax({ type: "POST", async: false, cache: false, url: "listComplaintQuantityReports.action", data: { "quantityReport.summaryStartDate": $("#...

Global site tag (gtag.js) - Google Analytics