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 相关文章推荐
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
前端常见跨域解决方案(全)
Sep 19 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
typescript配置alias的详细步骤
Aug 12 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 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
论建造顺序的重要性
2020/03/04 星际争霸
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
python Django批量导入不重复数据
2016/03/25 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
python 有效的括号的实现代码示例
2019/11/11 Python
python range实例用法分享
2020/02/06 Python
python制作抽奖程序代码详解
2021/01/15 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
PHP笔试题
2012/02/22 面试题
校园文化标语
2014/06/18 职场文书
电气工程师岗位职责
2015/02/12 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书