<!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. Java学习记录：降低耦合度

    耦合度定义 耦合度(Coupling)是对模块间关联程度的度量.耦合的强弱取决与模块间接口的复杂性.调用模块的方式以及通过界面传送数据的多少. 模块间的耦合度是指模块之间的依赖关系,包括控制关系.调用 ...

  2. java初阶

    java的开发工具分成 IDE(integrated developmentenvironment )和JDk(Java Development Kit) 一个.java中只能有一个public类且至 ...

  3. CCIE-交换路由复习笔记

    交换 考点: 1.trunk link(基础) 2.vtp 3.vlan 4.stp rstp mstp 5.hsrp vrrp glbp 6.ec Trunk link: 修改封装模式 802.1q ...

  4. 团队作业4——第一次项目冲刺（Alpha版本） 4.23

    团队作业4--第一次项目冲刺(Alpha版本) Day two: 会议照片 每日站立会议: 项目进展 今天是项目的Alpha敏捷冲刺的第二天,先大概整理下昨天已完成的任务以及今天计划完成的任务.今天主 ...

  5. 201521123011 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 协议.IP.域名.端口: 常用应用层协议:http, ftp 域名(通过域名可以找到IP)用ping测试 ...

  6. 201521123109《java程序设计》第九周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1. 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自 ...

  7. Window10中利用Windbg与虚拟机（window7）中调试驱动建立方法

    想起自己的windbg配置就转载:eqera的windows内核调试配置,真的是获益良多希望他不会介意我转载他的博客,帮了我很多,记录下来给我也给大家, 其中我主要看的是VMWare的pipe建立,而 ...

  8. Mybatis第八篇【一级缓存、二级缓存、与ehcache整合】

    Mybatis缓存 缓存的意义 将用户经常查询的数据放在缓存(内存)中,用户去查询数据就不用从磁盘上(关系型数据库数据文件)查询,从缓存中查询,从而提高查询效率,解决了高并发系统的性能问题. myba ...

  9. webstorm配置scss环境

    1.下载 Ruby  (安装过程中记得勾选添加到环境变量,安装结束最后可能会弹出一个cmd弹框,可以忽略) 2. cmd安装sass gem install sass 3. cmd检查是否安装 sas ...

  10. js 各种循环的区别与用法（for in,forEach,for of）

    1,forEach循环   不能跳过或者终止循环 const a = ["a","ss","cc"] a.dd="11" ...