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 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 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 面向对象详解
2012/09/13 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
在Python中使用HTML模版的教程
2015/04/29 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
幼儿教师个人求职信范文
2013/09/21 职场文书
初中学生评语大全
2014/04/24 职场文书
教师读书活动总结
2014/05/07 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
五年级学生评语大全
2014/12/26 职场文书
销售会议开幕词
2016/03/04 职场文书
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS
MySQL视图概念以及相关应用
2022/04/19 MySQL