Jquery中getJSON在asp.net中的使用说明


Posted in Javascript onMarch 10, 2011

准备工作
·Customer类

public class Customer 
{ 
public int Unid { get; set; } 
public string CustomerName { get; set; } 
public string Memo { get; set; } 
public string Other { get; set; } 
}

(一)ashx

Customer customer = new Customer 
{ Unid=1,CustomerName="宋江",Memo="天魁星",Other="黑三郎"}; 
string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer); 
context.Response.Write(strJson);

function GetCustomer_Ashx() { 
$.getJSON( 
"webdata/Json_1.ashx", 
function(data) { 
var tt = ""; 
$.each(data, function(k, v) { 
tt += k + ":" + v + "<br/>"; 
}) 
$("#divmessage").html(tt); 
}); 
}

·通过getJSON向ashx请求数据。返回的数据为JSON对象。
(二)ashx文件,但返回的是实体集合
Customer customer = new Customer 
{ Unid=1,CustomerName="宋江",Memo="天魁星",Other="黑三郎"}; 
Customer customer2 = new Customer 
{ Unid = 2, CustomerName = "吴用", Memo = "天机星", Other = "智多星" }; 
List<Customer> _list = new List<Customer>(); 
_list.Add(customer); 
_list.Add(customer2); 
string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(_list); 
context.Response.Write(strJson);

function GetCustomerList() { 
$.getJSON( 
"webdata/Json_1.ashx", 
function(data) { 
var tt = ""; 
$.each(data, function(k, v) { 
$.each(v,function(kk, vv) { 
tt += kk + ":" + vv + "<br/>"; 
}); 
}); 
$("#divmessage").html(tt); 
}); 
}

 (三)请求aspx文件
·cs文件
protected void Page_Load(object sender, EventArgs e) 
{ 
Customer customer = new Customer 
{ Unid = 1, CustomerName = "宋江", Memo = "天魁星", Other = "黑三郎" }; 
string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer); 
Response.Write(strJson); 
}

·Aspx文件
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Json_1.aspx.cs"
Inherits="webdata_Json_1" %>

前台文件只保留Page声明,其它全部删除。

·js文件

function GetCustomer_Aspx() { 
$.getJSON( 
"webdata/Json_1.aspx", 
function(data) { 
var tt = ""; 
$.each(data, function(k, v) { 
tt += k + ":" + v + "<br/>"; 
}) 
$("#divmessage").html(tt); 
}); 
}

这个部分与请求ashx文件时相同。
请求实体集合时,与ashx时相同,这里不做重复。
(四)请求文本文件
文本文件提供json字符串,由$.getJSON得到json对象。
·文本文件
{Unid:1,CustomerName:"宋江",Memo:"天魁星",Other:"黑三郎"}
文本文件提供json串,对于json的组成格式,请参见其它文档。对于这一实体json,会被忽略空行与空格。
function GetCustomer_txt() { 
$.getJSON( 
"webdata/Json_1.txt", 
function(data) { 
var tt = ""; 
$.each(data, function(k, v) { 
tt += k + ":" + v + "<br/>"; 
}) 
$("#divmessage").html(tt); 
}); 
}

解析的方法与其它的相同。

对于多行的如下:
文本:

[ 
{Unid:1,CustomerName:"宋江",Memo:"天魁星",Other:"黑三郎"}, 
{Unid:2,CustomerName:"吴用",Memo:"天机星",Other:"智多星"} 
]

解析:
function GetCustomer_TxtList() { 
$.getJSON( 
"webdata/Json_1.txt", 
function(data) { 
var tt = ""; 
$.each(data, function(k, v) { 
$.each(v, function(kk, vv) { 
tt += kk + ":" + vv + "<br/>"; 
}); 
}); 
$("#divmessage").html(tt); 
}); 
}

与其它的相同。
(五)带参数ajax请求
以ashx为例子,按客户id来请求客户。
·Ashx文件
if(context.Request["iUnid"]==null) 
return; 
context.Response.ContentType = "text/plain"; 
Customer customer = new Customer 
{ Unid = 1, CustomerName = "宋江", Memo = "天魁星", Other = "黑三郎" }; 
Customer customer2 = new Customer 
{ Unid = 2, CustomerName = "吴用", Memo = "天机星", Other = "智多星" }; 
List<Customer> _list = new List<Customer>(); 
_list.Add(customer); 
_list.Add(customer2); int iCustomerId =Convert.ToInt32(context.Request["iUnid"]); 
var cus = from q in _list 
where q.Unid == iCustomerId 
select q; 
string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(cus); 
context.Response.Write(strJson);

·ajax请求
function GetCustomer_AshxWithPara() { 
$.getJSON( 
"webdata/Json_2.ashx", 
{ iUnid: 1 }, 
function(data) { 
var tt = ""; 
$.each(data, function(k, v) { 
$.each(v, function(kk, vv) { 
tt += kk + ":" + vv + "<br/>"; 
}); 
}); 
$("#divmessage").html(tt); 
}); 
}

其中参数也是以k/v对格式发出。请求返回的可以看到:在服务端以Customer列表集合返回。

在jquery库中,getJSON其实是调用的:Query.get(url, data, callback, "json")
这点很重要。

Javascript 相关文章推荐
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
js简单抽奖代码
Jan 16 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
纯javascript版日历控件
Nov 24 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
序列化模块json代码实例详解
Mar 03 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 #Javascript
基于jquery的地址栏射击游戏代码
Mar 10 #Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 #Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 #Javascript
jQuery总体架构的理解分析
Mar 07 #Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 #Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 #Javascript
You might like
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
PHP实现文件下载详解
2014/11/27 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
vue实现搜索功能
2019/05/28 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
python实现决策树
2017/12/21 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
Python使用Pygame绘制时钟
2020/11/29 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
帕克纽约:PARKER NY
2018/12/09 全球购物
Sony C++笔试题
2013/03/10 面试题
建房协议书
2014/04/11 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang