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 相关文章推荐
javascript之对系统的toFixed()方法的修正
May 08 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 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
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
Django的分页器实例(paginator)
2017/12/01 Python
python基础教程项目三之万能的XML
2018/04/02 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
Python绘制动态水球图过程详解
2020/06/03 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
全民健身日活动方案
2014/01/29 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
酒会开场白大全
2015/06/01 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python