<!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. hdu2121 Ice_cream's world II

    hdu2121 Ice_cream's world II 给一个有向图,求最小树形图,并输出根节点 \(n\leq10^3,\ m\leq10^4\) 最小树形图 对于求无根最小树形图,可以建一个虚拟 ...

  2. Luogu P1967 货车运输

    qwq 这题是知道了正解做法才写的.. 求每两点间最小权值最大的路径,本来我以为要每个点都跑一遍dij(?),后来意识到生成树好像是用来找这个的( ´▽｀) 然后我问dtxdalao对不对,他说“我记 ...

  3. Android so注入(inject)和Hook技术学习（二）——Got表hook之导入表hook

    全局符号表(GOT表)hook实际是通过解析SO文件,将待hook函数在got表的地址替换为自己函数的入口地址,这样目标进程每次调用待hook函数时,实际上是执行了我们自己的函数. GOT表其实包含了 ...

  4. .NET Core Community 第四个千星项目诞生：微服务框架 Surging

    本文所有打赏将全数捐赠于 NCC(NCC 的资金目前由 倾竹大人 负责管理),请注明捐赠于 NCC.捐赠情况将由倾竹大人在此处公示. 提及 .NET 微服务,我们脑海中浮现的一系列印象中,总有 Sur ...

  5. 使用PHPExcel将数据导出至Excel

    安装类库 从GitHub上下载PHPExcel类库 地址:https://github.com/PHPOffice/PHPExcel 解压后将Classes文件夹移动到ThinkPHP的extend目 ...

  6. ECS上配置FTP Filezilla

    又来搞华为ECS 第一,服务器安装服务端 第二,设置被动模式,把服务器的公网IP填好 第三,生成一个服务器证书,客户端连接时接受 第四,设置自定义的被动连接端口比如 9000-9050 第五,去ECS ...

  7. Python-Requests库详解

    查看一下是否安装requests库 什么是Requests Requests是用python语言基于urllib编写的,采用的是Apache2 Licensed开源协议的HTTP库如果你看过上篇文章关 ...

  8. Wannafly summer camp Day6 - D 区间权值

    这道题实在是不该,我在化式子的时候,多此一举,把式子进行累加,导致自己当时化的式子是错的,这样导致自己卡了很久,也没想到好的思路,赛后重新分析一波,感觉巨™简单...难受的一逼. 这道题的关键在于,W ...

  9. codeforces#1090 D. New Year and the Permutation Concatenation（打表找规律）

    题意:给出一个n,生成n的所有全排列,将他们按顺序前后拼接在一起组成一个新的序列,问有多少个长度为n的连续的子序列和为(n+1)*n/2 题解:由于只有一个输入,第一感觉就是打表找规律,虽然表打出来了 ...

  10. hibernate添加数据时Exception in thread "main" org.hibernate.PropertyValueException: not-null property references a null or transient value: com.javakc.hibernate.test.entity.TestEntity.testName

    意思是,一个非null属性引用了一个null或瞬态值.就是在对应实体类配置文件hbm.xml中该属性配置了not-null="true",将其去掉即可.