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继承 笔记
Jul 13 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
vuex中使用对象展开运算符的示例
Sep 25 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
node中的cookie的具体使用
Sep 13 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
JS document对象简单用法完整示例
Jan 14 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 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
PHP5中MVC结构学习
2006/10/09 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python实现在线音乐播放器
2017/03/03 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
python是怎么被发明的
2020/06/15 Python
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
internal修饰符起什么作用
2013/12/16 面试题
送货司机岗位职责
2013/12/11 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python
详细介绍python操作RabbitMq
2022/04/12 Python