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 相关文章推荐
js parsefloat parseint 转换函数
Jan 21 Javascript
Javascript中获取出错代码所在文件及行数的代码
Sep 23 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
jQuery实现当按下回车键时绑定点击事件
Jan 28 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
js登录弹出层特效
Mar 07 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 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 IP及IP段进行访问限制的代码
2008/12/17 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
JavaScript this 深入理解
2009/07/30 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
微信小程序上传图片实例
2018/05/28 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
解决python 上传图片限制格式问题
2019/10/30 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
学子宴答谢词
2014/01/25 职场文书
小学三年级数学教学反思
2014/01/31 职场文书
小学生寒假家长评语
2014/04/16 职场文书
大学生找工作求职信
2014/07/09 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
如何在Python项目中引入日志
2021/05/31 Python
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL