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使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
vue监听dom大小改变案例
Jul 29 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 5.0创建图形的巧妙方法
2010/10/12 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
mac下如何将python2.7改为python3
2018/07/13 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
医药代表个人求职信范本
2013/12/19 职场文书
九年级家长会邀请函
2014/01/15 职场文书
行政办公室岗位职责
2014/03/18 职场文书
劲霸男装广告词
2014/03/21 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
论文致谢词范文
2015/05/14 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书