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 相关文章推荐
javascript+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
小议javascript 设计模式 推荐
Oct 28 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
vant实现购物车功能
Jun 29 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 Javascript
vue项目打包后路由错误的解决方法
Apr 13 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
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
js 操作符汇总
2014/11/08 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
python更改已存在excel文件的方法
2018/05/03 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
浅析python 字典嵌套
2020/09/29 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
《谁的本领大》教后反思
2014/04/25 职场文书
奥运会口号
2014/06/13 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
小孩不笨观后感
2015/06/03 职场文书
贷款收入证明格式
2015/06/24 职场文书
网络研修随笔感言
2015/11/18 职场文书
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android