<!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>Ajax和getJSON获取后台普通Json数据和层级Json数据解析</title>

    <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            //方式一 Ajax方式获取Json数据

            $.ajax({

                url: 'jsondata.ashx?type=1',

                type: 'GET',

                dataType: 'json',

                timeout: 1000,

                cache: false,

                beforeSend: LoadFunction, //加载执行方法

                error: erryFunction,  //错误执行方法

                success: succFunction //成功执行方法

            })

            function LoadFunction() {

                $("#list").html('加载中...');

            }

            function erryFunction() {

                alert("error");

            }

            function succFunction(tt) {

                var json = eval(tt); //数组

                var tt = "";

                $.each(json, function (index) {

                    //循环获取数据

                    var Id = json[index].id;

                    var Name = json[index].name;

                    var Age = json[index].age;

                    var Score = json[index].score;

                    tt += Id + "___" + Name + "___" + Age + "___" + Score + "<br>";

                });

                $("#list").html('');

                $("#list").html(tt);

            }  

            //方式二 Json方式获取数据

            $.getJSON(

                "jsondata.ashx?type=1",

                function (data) {

                    //循环获取数据

                    var tt = "";

                    $.each(data, function (k, v) {

                        $.each(v, function (kk, vv) {

                            tt += kk + ":" + vv + "___";

                        });

                        tt += "<br/>";

                    });

                    $("#list2").html(tt);

                }

            );  

            //方式三 Ajax方式获取Json层级数据

            $.ajax({

                url: 'jsondata.ashx?type=3',

                type: 'GET',

                dataType: 'json',

                timeout: 1000,

                cache: false,

                beforeSend: LoadFunction1, //加载执行方法

                error: erryFunction1,  //错误执行方法

                success: succFunction1 //成功执行方法

            })

            function LoadFunction1() {

                $("#list3").html('加载中...');

            }

            function erryFunction1() {

                alert("error");

            }

            function succFunction1(tt) {

                var json = eval(tt); //数组

                var tt = "";

                $.each(json, function (index) {

                    //循环获取数据

                    var Id = json[index].id;

                    var Name = json[index].name;

                    var Age = json[index].age;

                    var Score = json[index].score;

                    tt += Id + "___" + Name + "___" + Age + "___";

                    $.each(Score, function (k, v) {

                        tt += k + ":" + v + "___";

                    })

                    tt += "<br/>";

                });

                $("#list3").html('');

                $("#list3").html(tt);

            }  

            //方式四 Json方式获取层级数据

            $.getJSON(

                "jsondata.ashx?type=3",

                function (json) {

                    //循环获取数据

                    var tt = "";

                    $.each(json, function (index) {

                        //循环获取数据

                        var Id = json[index].id;

                        var Name = json[index].name;

                        var Age = json[index].age;

                        var Score = json[index].score;

                        tt += Id + "___" + Name + "___" + Age + "___";

                        $.each(Score, function (k, v) {

                            tt += k + ":" + v + "___";

                        })

                        tt += "<br/>";

                    });

                    $("#list4").html('');

                    $("#list4").html(tt);

                }

            );

        });

    </script>

</head>

<body>

    <p>方式一</p>

    <ul id="list">

    </ul>

    ____________________________________

    <p>方式二</p>

    <ul id="list2">

    </ul>

    ____________________________________

    <p>方式三</p>

    <ul id="list3">

    </ul>

    ____________________________________

    <p>方式四</p>

    <ul id="list4">

    </ul>

</body>

</html>

　本文出自：http://blog.csdn.net/smartsmile2012/article/details/17316351　

jQuery AJAX获取JSON数据解析多种方式示例的更多相关文章

  1. jquery ajax获取json并解析，获取的json是object对象格式

    首先我们使用的是ajax方式,推荐一个学习网址: http://blog.csdn.net/shiyaru1314/article/details/51065410 这个博主写的特别好.现在来看我们的 ...

  2. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  3. jQuery异步获取json数据的2种方式

    jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: ...

  4. jquery ajax返回json数据进行前后台交互实例

    jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...

  5. ajax获取json数据及实现跨域请求

    最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...

  6. AngularJS学习笔记（3）——通过Ajax获取JSON数据

    通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...

  7. JS-利用ajax获取json数据，并传入页面生成动态tab

    封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...

  8. ajax获取json数据为undefined--原因解析

    解决办法:var dataObj=eval("("+data+")");//转换为json对象 问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...

  9. jquery ajax 获取 json 文件数据

    [ {"name":"project1"}, {"name":"project2"}, {"name" ...

随机推荐

  1. mybatis之一对多

    今天主要话题围绕这么几个方面? mybatis一对多示例 sql优化策略 一.mybatis之一对多 在说一对多之前,顺便说一下一对一. 一对一,常见的例子,比如以常见的班级例子来说,一个班主任只属于 ...

  2. 视觉机器学习------KNN学习

    KNN(K-Nearest Neighbor algorithm, K最近邻方法)是一种统计分类器,属于惰性学习. 基本思想:输入没有标签即未经分类的新数据,首先提取新数据的特征并与测试集中的每一个数 ...

  3. WPF(一)

    什么是WPF WPF(Windows Presentation Foundation)是用于Windows的现代图形显示系统.与之前出现的技术相比,WPF发生了根本性变化.WPF引用了"内置 ...

  4. Ext 编辑 comobox编辑源只能选择一个

    storePrType.DataSource = optsvc.Select("28").Where(r => r.OptionID == cmbEngineeringPrT ...

  5. 性能调优3：硬盘IO性能

    数据库系统严重依赖服务器的资源:CPU,内存和硬盘IO,通常情况下,内存是数据的读写性能最高的存储介质,但是,内存的价格昂贵,这使得系统能够配置的内存容量受到限制,不能大规模用于数据存储:并且内存是易 ...

  6. 吉特日化MES-日化生产称料基本步骤

    在日化行业称料是一个非常重要的环节,整个生产过程中称料所占据的时间也比较长,特别是遇到对料体精度高,量大的情况下称料都比较困难,汇总一下人工称料的基本过程: (1) 称量任务准备:根据生产工单或者生产 ...

  7. Linux iptables 命令

    iptables 是 Linux 管理员用来设置 IPv4 数据包过滤条件和 NAT 的命令行工具.iptables 工具运行在用户态,主要是设置各种规则.而 netfilter 则运行在内核态,执行 ...

  8. c语言中字符串数组初始化的一点总结&& c++访问控制的三种方式

    char *c[]={"ONE","TWO","THREE","FOUR"}; // c语言中定义了一个字符串数组(也称 ...

  9. PHP api接口和SQL数据库关联

    数据库表创建 服务器环境配置.连接 .操作.数据库 API接口  原则:

  10. 什么是IaaS, PaaS和SaaS及其区别

    IaaS, PaaS和SaaS是云计算的三种服务模式. . SaaS:Software-as-a-Service(软件即服务)提供给客户的服务是运营商运行在云计算基础设施上的应用程序,用户可以在各种设 ...