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 相关文章推荐
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
JS运算符简单用法示例
Jan 19 Javascript
基于openlayers实现角度测量功能
Sep 28 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
模拟xcopy的函数
2006/10/09 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
python实现的希尔排序算法实例
2015/07/01 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
python实现FTP服务器服务的方法
2017/04/11 Python
python僵尸进程产生的原因
2017/07/21 Python
Python探索之ModelForm代码详解
2017/10/26 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
后勤人员自我鉴定
2013/10/20 职场文书
美德好少年主要事迹
2014/01/29 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
创优争先心得体会
2014/09/11 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
于丹论语心得观后感
2015/06/15 职场文书