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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
jQuery中:input选择器用法实例
Jan 03 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
详解JavaScript函数对象
Nov 15 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 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
jQuery 源码分析笔记
2011/05/25 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
简单了解Python生成器是什么
2019/07/02 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
村委会贫困证明
2014/01/14 职场文书
入党申请自荐书范文
2014/02/11 职场文书
三年级小学生评语
2014/04/22 职场文书
政府个人对照检查材料
2014/08/28 职场文书
2014年科技工作总结
2014/11/26 职场文书
2016年国陪研修感言
2015/11/18 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL