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 相关文章推荐
javascript dom 基本操作小结
Apr 11 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
微信小程序实现多选功能
Nov 04 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
PHP 金额数字转换成英文
2010/05/06 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
Django models.py应用实现过程详解
2019/07/29 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
大学自荐信
2013/12/12 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
超市重阳节活动方案
2014/02/10 职场文书
小学少先队活动方案
2014/02/18 职场文书
捐款倡议书
2014/04/14 职场文书
项目负责人岗位职责
2015/02/15 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript