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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
Javascript 圆角div的实现代码
Oct 15 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 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 读取文件头判断文件类型的实现代码
2013/08/05 PHP
PHP实现货币换算的方法
2014/11/29 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
vue动画效果实现方法示例
2019/03/18 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
python字符串替换的2种方法
2014/11/30 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
制药工程专业应届生求职信
2013/09/24 职场文书
中国梦的演讲稿
2014/01/08 职场文书
海飞丝的广告词
2014/03/20 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
python 中的jieba分词库
2021/11/23 Python