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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
深入认识javascript中的eval函数
Nov 02 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php自动适应范围的分页代码
2008/08/05 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
Python开发编码规范
2006/09/08 Python
python实现画圆功能
2018/01/25 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
python中sys模块是做什么用的
2020/08/16 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
幼儿园英语教学反思
2014/01/30 职场文书
善意的谎言事例
2014/02/15 职场文书
学校搬迁方案
2014/06/15 职场文书
无房证明范本
2014/09/17 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
维稳工作承诺书
2015/01/20 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
师范生教育见习总结
2015/06/23 职场文书
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle