jQuery+ajax+asp.net获取Json值的方法


Posted in Javascript onJune 08, 2016

本文实例讲述了jQuery+ajax+asp.net获取Json值的方法。分享给大家供大家参考,具体如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQueryAjaxJson取值示例</title>
  <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#Button1").click(function () {
        $.ajax({
          url: 'AjaxQuery.aspx',
          type: 'GET',
          dataType: 'json',
          timeout: 1000,
          cache: false,
          beforeSend: LoadFunction, //加载执行方法
          error: erryFunction, //错误执行方法
          success: succFunction //成功执行方法
        })
        function LoadFunction() {
          $("#ddd").html('加载中...');
        }
        function erryFunction() {
          alert("error");
        }
        function succFunction(tt) {
          $("#ddd").html('');
          var json = eval(tt); //数组
          $.each(json, function (index, item) {
            //循环获取数据
            var name = json[index].Name;
            var age = json[index].Age;
            var sex = json[index].Sex;
            $("#ddd").html($("#ddd").html() + "<br>" + name + " - " + age + " - " + sex + "<br/>");
          });
        }
      });
    })
  </script>
</head>
<body>
  <input type="button" id="Button1" value="获取json数据" />
  <span id="ddd"></span>
</body>
</html>
//Ajax Post Text
function savedata(tempid) {
  var tid = $('#hidtemplate').attr('value');
  var desc = $("#contentdiv").html();
  var num_iid = $("#num_iidArr").attr('value');
  var num_iid2 = $("#num_iidArr001").attr('value'); //发布页面
  var topsvalue = $("#tops").attr('value');
  if (num_iid != "" && num_iid2 != "") {
    $.ajax({
      url: 'TabBaoHandler.ashx',
      type: 'POST',
      data: 'type=3&num_iid=' + num_iid2 + '&tid=' + tid + '&desc=' + desc + '&top_session=' + topsvalue,
      dataType: 'text',
      timeout: 20000,
      cache: false,
      //async: false, //同步
      beforeSend: LoadFunction, //加载执行方法
      error: erryFunction, //错误执行方法
      success: succFunction //成功执行方法
    })
    function LoadFunction() {
      showLoad("正在运行中...");
    }
    function erryFunction() {
      $("#contentdiv").html("<p style=\"padding:5px\"><img src=\"images/error.png\" />sorry,提交失败</p>");
      closeLoad();
    }
    function succFunction(tt) {
      closeLoad();
      $("#contentdiv").show().html(tt);
    }
  } else {
    alert("请选择后再操作");
  }
}
using System;
//新增
using System.Web.Script.Serialization;
using System.Collections.Generic;
public partial class AjaxQuery : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    if (!IsPostBack)
    {
      List<Student> list = new List<Student>();
      Student c = new Student();
      c.Name = "张三";
      c.Age = 23;
      c.Sex = "男";
      list.Add(c);
      Student cc = new Student();
      cc.Name = "李四";
      cc.Age = 25;
      cc.Sex = "男";
      list.Add(cc);
      Student ccc = new Student();
      ccc.Name = "李玲";
      ccc.Age = 25;
      ccc.Sex = "女";
      list.Add(ccc);
      Response.ContentType = "application/json";
      Response.Write(new JavaScriptSerializer().Serialize(list));////这个很关键,否则error
      Response.End();
    }
  }
  public struct Student
  {
    public string Name;
    public int Age;
    public string Sex;
  }
}
Javascript 相关文章推荐
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
js验证框架实现代码分享
May 18 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 #Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 #Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 #Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 #Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 #Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 #Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 #Javascript
You might like
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
PHP重定向的3种方式
2013/03/07 PHP
Maps Javascript
2007/01/22 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python读取与写入csv格式文件的示例代码
2017/12/16 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
阿里云:Aliyun.com
2017/02/15 全球购物
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
大四学生找工作的自荐信
2014/03/27 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
六查六看六改心得体会
2014/10/14 职场文书
会议开幕词
2015/01/28 职场文书
2016新年慰问信范文
2015/03/25 职场文书
党员承诺书格式范文
2015/04/28 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书