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 相关文章推荐
jQuery的一些注意
Dec 06 Javascript
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
JavaScript编码小技巧分享
Sep 17 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
网页自动跳转代码收集
2009/09/27 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现rsa加密实例详解
2017/07/19 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
使用tensorflow实现AlexNet
2017/11/20 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
使用python模拟命令行终端的示例
2019/08/13 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
简约控的天堂:The Undone
2016/12/21 全球购物
搞笑创意广告语
2014/03/17 职场文书
授权委托书格式
2014/07/31 职场文书
班主任2015新年寄语
2014/12/08 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python