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 巧妙去除数组中的重复项
Jan 25 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
jquery实现数字输入框
Feb 22 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
node.js开发辅助工具nodemon安装与配置详解
Feb 06 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 绘制网站登录首页图片验证码
2016/04/12 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python获取网页上图片下载地址的方法
2015/03/11 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
Python 自动化表单提交实例代码
2017/06/08 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
python列表的逆序遍历实现
2020/04/20 Python
中式餐厅创业计划书范文
2014/01/23 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
优秀班组申报材料
2014/12/25 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript