<!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>

<%@ WebHandler Language="C#" Class="jsondata" %>

using System;

using System.Web;

using System.Web.Script.Serialization;

using System.IO;

using System.Text;

using System.Collections;

using System.Collections.Generic;

using System.Data;

using Newtonsoft.Json;

public class jsondata : IHttpHandler {

    public void ProcessRequest(HttpContext context)

    {

        context.Response.ContentType = "text/plain";

        context.Response.Cache.SetNoStore();

        string type = context.Request["type"];

        if (type=="1") //普通数据

        {

            List<Dictionary<String, String>> aa = new List<Dictionary<string, string>>();

            for (int i = 0; i < 6; i++)

            {

                Dictionary<String, String> aaa = new Dictionary<string, string>();

                aaa.Add("id", "no" + i);

                aaa.Add("name", "张三" + i);

                aaa.Add("age", "21");

                aaa.Add("score", "1001");

                aa.Add(aaa);

            }

            string json = JsonConvert.SerializeObject(aa, Formatting.Indented);

            context.Response.Write(json);

        }

        if (type == "3") //层级数据

        {

            List<Student> list = new List<Student>();

            for (int i = 0; i < 6; i++)

            {

                Student a = new Student();

                a.id = "no" + i;

                a.name = "张三" + i;

                a.age = "21";

                Dictionary<string, string> dic = new Dictionary<string, string>();

                dic.Add("语文","80");

                dic.Add("数学", "81");

                dic.Add("英语", "83");

                dic.Add("生物", "89");

                dic.Add("化学", "90");

                dic.Add("物理", "95");

                a.score = dic;

                list.Add(a);

            }

            string json = JsonConvert.SerializeObject(list, Formatting.Indented);

            context.Response.Write(json);

        }

    }

    public struct Student

    {

        public string id;

        public string name;

        public string age;

        public Dictionary<string,string> score;

    }

    public bool IsReusable

    {

        get

        {

            return false;

        }

    }

}

Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析的更多相关文章

  1. JQuery Ajax调用asp.net后台方法

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先来个简单的实例热热身吧. 1.无参数的方法调用 asp.net code: using System.Web.Scrip ...

  2. .Net中jQuery.ajax()调用asp.net后台方法 总结

    利用JQuery的$.ajax()调用.Net后台方法有多种方式, 不多说了  直接上代码 前台代码 <script type="text/javascript"> $ ...

  3. jquery ajax跨域请求后台的简单例子

    一.简介AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简 ...

  4. jQuery.ajax()调用asp.net后台方法

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法.介意方法名不要重名 建一个WebFormAjax名aspx文件 CS <%@ Page Language=" ...

  5. jQuery ajax - get(),getJSON(),post()方法

    1)       jQuery ajax - get() 方法: $(selector).get(url,data,success(response,status,xhr),dataType) 参数 ...

  6. jQuery AJAX实现调用页面后台方法

    1.新建demo.aspx页面.2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 3.无参数的方法调用. 大家注意了,这个版本不能 ...

  7. jquery ajax的getJSON使用

    getJSON的定义和用法 通过 HTTP GET 请求载入 JSON 数据. 在 jQuery 1.2 中,您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据,如 " ...

  8. jQuery ajax get与post后台交互中的奥秘

    这两天在做关注功能模块(类似于Instagram).多处页面都需要通过一个"关注"按钮进行关注或者取消该好友的操作.一个页面对应的放一个按钮,进行操作.效率低维护性差.因此想通过j ...

  9. jquery ajax中 php前台后台文件中编辑都是uft-8,返回数据还是乱码

    jquery ajax中 前台后台文件中编辑都是uft-8,返回数据还是乱码 解决如下: 在后台处理文件里面需要再加编辑 header("Content-Type:text/html;cha ...

随机推荐

  1. SUSE Linux Enterprise 11 离线安装 DLIB python机器学习模块

    python机器学习模块安装 环境:SUSE Linux Enterprise 11 sp4  离线安装 说明:在安装dlib时依赖的基础 环境较多,先升级gcc,以适应c++ 11的使用:需要用到c ...

  2. JS解析JSON 注意事项总结

    0.必须先解析看看,不然看了白看   地址: http://www.bejson.com/ 1.返回的节点内是不是一个json. 如  {id:1,names:"[{name:A},{nam ...

  3. ES6块级作用域

    块级作用域的优点 避免变量冲突,比如程序中加载了多个第三方库的时候,如果没有妥善地将内部私有函数或变量隐藏起来,就很容易引发变量冲突: 可以方便的进行模块管理: 利于内存回收:(块级作用域里声明的变量 ...

  4. MyEclipse安装步骤和破解

    Myeclipse的安装步骤 MyEclipse简介: MyEclipse,是在eclipse 基础上加上自己的插件开发而成的功能强大的企业级集成开发环境,主要用于Java.Java EE以及移动应用 ...

  5. 团队作业8——第二次项目冲刺（Beta阶段）第二天

    BETA阶段冲刺第二天 1.当天站立式会议 2.每个人的工作 (1) 昨天已完成的工作: Alpha阶段的Bug修复 (2) 今天计划完成的工作: 编写前端页面 (3) 工作中遇到的困难: 对于前端页 ...

  6. 201521123073 《Java程序设计》第6周学习总结

    1. 本章学习总结 2. 书面作业 1.clone方法 1.1 Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 1.2 自己设计类时,一 ...

  7. 201521123087 《Java程序设计》第5周学习总结

    1. 本周学习总结 2. 书面作业 作业参考文件下载 代码阅读:Child压缩包内源代码1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结 ...

  8. Linux SDK之uClinux、Broadcom、Atheros、Realtek、Ralink、Marvell、Intel

    接触的Linux SDK越来越多,整理整理,分享分享,不求系统全面,对您有帮助便足矣 文中大部分是与AP/Router SoC解决方案(单芯片WIFI 路由器解决方案)相关的Linux SDK SDK ...

  9. 201521123045 《JAVA程序设计》第1周学习总结

    1. 本周学习总结 学习了入门的java知识,知道了jdk.eclipse等基础软件,了解了如何编译最基础的java程序.知道了java的基本原理以及java的几种数据类型.掌握使用简单编译器编写ja ...

  10. Junit4学习（五）Junit4测试套件

    一,背景 1,随着开发规模的深入和扩大,项目或越来越大,相应的我们的测试类也会越来越多:那么就带来一个问题,假如测试类很多,就需要多次运行,造成测试的成本增加:此时就可以使用junit批量运行测试类的 ...