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 相关文章推荐
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
angularJS 入门基础
Feb 09 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 Javascript
JS创建自定义对象的六种方法总结
Dec 15 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
一道JS算法面试题——冒泡、选择排序
Apr 21 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截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
python hough变换检测直线的实现方法
2019/07/12 Python
Django 重写用户模型的实现
2019/07/29 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Python计算信息熵实例
2020/06/18 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
党员实事承诺书
2014/03/26 职场文书
师德师风整改措施
2014/10/24 职场文书
学生会招新宣传语
2015/07/13 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL