<!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. 提取http接口响应报文中需要的值，获得的是string，使用dict转换为字典处理

  2. mysql备份命令

    mysql备份命令如下: 备份多个数据库可以使用如下命令: mysqldump -uroot -p123456 --databases test1 test2 test3 > /home/tes ...

  3. 深入理解 Object.defineProperty 及实现数据双向绑定

    Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...

  4. TextFormField数据处理

    重点:TextFormField这个Widget是由TextField封装而来,继承了TextField的特性:数据传递依靠:GlobalKey<FormState>(),Register ...

  5. Generative Adversarial Nets[content]

    0. Introduction 基于纳什平衡,零和游戏,最大最小策略等角度来作为GAN的引言 1. GAN GAN开山之作 图1.1 GAN的判别器和生成器的结构图及loss 2. Condition ...

  6. 多个jdk 变更 引起 tomcat插件 启动不了 The JRE could not be found.Edit the server and change the JRE location.

    The JRE could not be found.Edit the server and change the JRE location. 在Windows->Preferences-> ...

  7. 探究如何永久更改Maven的Dynamic Web Project版本及pom.xml默认配置

    一:问题 在用eclipse创建一个maven project (webApp)时,我们一般会要进行许多麻烦的配置,比如 1.更改Java jdk版本为1.7或1.8(默认1.5) 2.补全src/m ...

  8. JAVA里自定义注解来进行数据验证

    API开发中经常会遇到一些对请求数据进行验证的情况,这时候如果使用注解就有两个好处,一是验证逻辑和业务逻辑分离,代码清晰,二是验证逻辑可以轻松复用,只需要在要验证的地方加上注解就可以. Java提供了 ...

  9. 我的微信小程序第一篇（入门）

    前言 微信小程序出来已经有一段时间了,已经有很多大牛都写过相关教程了,那么我为啥还要写这篇文章呢?其实仅仅是个人对微信开发的一个兴趣吧,觉得是个很有意思的事情,后面有时间可能会发更多关于小程序的文章, ...

  10. js判断浏览器的类型，动态调整div布局

    最近写页面用bootstrap和amazeUi然后发现自己写的部分和两个框架做重合时,页面大小变化后有的元素变得很乱,很乱无奈只好用js判断 window.onscroll = function sc ...