jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析


Posted in Javascript onJune 08, 2016

本文实例讲述了jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
关于session和cookie的简单理解
Jun 08 #Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 #Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 #Javascript
JavaScript基础语法之js表达式
Jun 07 #Javascript
JavaScript必看小技巧(必看)
Jun 07 #Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 #Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 #Javascript
You might like
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
JS实现图片切换效果
2018/11/17 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
在Python的Django框架中编写编译函数
2015/07/20 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
python使用tornado实现简单爬虫
2018/07/28 Python
基于python实现简单日历
2018/07/28 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
入党积极分子自我鉴定范文
2014/03/25 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
小学生毕业评语
2014/12/26 职场文书
乱世佳人观后感
2015/06/08 职场文书
红色革命电影观后感
2015/06/18 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
用JS实现飞机大战小游戏
2021/06/09 Javascript
详解Python类和对象内容
2021/06/22 Python
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL