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 相关文章推荐
HTML node相关的一些资料整理
Jan 01 Javascript
ExtJS 入门
Oct 29 Javascript
基于json的jquery地区联动效果代码
Jul 06 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
JS闭包用法实例分析
Mar 27 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 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
discuz安全提问算法
2007/06/06 PHP
php,ajax实现分页
2008/03/27 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
javascript FormatNumber函数实现方法
2008/12/30 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
python实现批量改文件名称的方法
2015/05/25 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
Python count函数使用方法实例解析
2020/03/23 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
python如何随机生成高强度密码
2020/08/19 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
离婚协议书范本样本
2014/08/19 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
2015年工程师工作总结
2015/04/30 职场文书
门球健将观后感
2015/06/16 职场文书
教师节联欢会主持词
2015/07/04 职场文书
表扬信范文
2019/04/22 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python