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 相关文章推荐
jquery 打开窗口返回值实现代码
Mar 04 Javascript
JavaScript之自定义类型
May 04 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
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实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
浅析Python中的for 循环
2016/06/09 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
Python入门学习指南分享
2018/04/11 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
python调用webservice接口的实现
2019/07/12 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
什么是属性访问器
2015/10/26 面试题
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
政工例会汇报材料
2014/08/26 职场文书
护士求职自荐信
2015/03/25 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
使用python绘制横竖条形图
2022/04/21 Python