<!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. sql注入的防护

    一.严格的数据类型 在Java,C#等高级语言中,几乎不存在数字类型注入,而对于PHP,ASP等弱类型语言,就存在了危险. 防御数字型注入相对简单,如果不需要输入字符型数据,则可以用is_numeri ...

  2. 在其他Activity中展示自定义相机拍的照片

    在使用相机拍照中,我们需要当点击了确定按钮之后,拍的照片展示在其他Activity的ImageView中,代码如下: 1.首先在自定义相机的Activity中,处理点击拍照确定按钮后的逻辑功能:将图片 ...

  3. 编程&学习总结格式

    编程&学习总结格式 一.本周完成的作业: 题目1.A乘以B 题目内容描述:看我没骗你吧 -- 这是一道你可以在10秒内完成的题:给定两个绝对值不超过100的整数A和B,输出A乘以B的值. 1) ...

  4. js超时处理

    var now = new Date(); var exitTime = now.getTime() + numberMillis; //numberMillis毫秒超时参数 while (true) ...

  5. Java之所有输入流输出流的分类

    (1)字节输入流        基类:InputStream        FileInputStream.ByteArrayInputStream.PipedInputStream.Buffered ...

  6. 【C#复习总结】垃圾回收机制(GC)1

    摘要:今天我们漫谈C#中的垃圾回收机制,本文将从垃圾回收机制的原理讲起,希望对大家有所帮助. GC的前世与今生 虽然本文是以.NET作为目标来讲述GC,但是GC的概念并非才诞生不久.早在1958年,由 ...

  7. 如何向微软 Docs 和本地化社区提交翻译贡献

    Docs (docs.microsoft.com)是微软新版的文档网站,重新规划了各项技术栈的文档结构,看起来比 MSDN 可读性更好.虽然 Docs 提供了各种语言的版本,但大多是机器翻译,某些中文 ...

  8. Fastreport.net 如何在开发MVC应用程序时使用报表

    当你使用MVC模板创建自己的Web项目,会出现一个合理的问题 - 如何在其中使用FastReport.Net Web报表? 在这篇文章中,我会为你演示如何做到这一点. 由于在MVC体系结构中,视图与逻 ...

  9. 全局关键字搜索：Element UI Table内容过滤\jQuery过滤器fastLiveFilter插件\BootstrapVue插件;

    ```html data:{ resultMaster: [], otableData:[], schfilter:'' } watch: { schfilter: function(val, old ...

  10. ps昏暗室内照片调成暖色光亮效果

    最终效果 一.打开素材图片,把背景图层复制一层,做HDR滤镜操作,如果你没有这款滤镜,可以去网上下载,参数及效果如下图. 二.复制一层,用Noise滤镜做降噪处理,参数及效果如下图. 三.新建一个图层 ...