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数组去重3种方法的性能测试与比较
Mar 26 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
微信小程序 navbar实例详解
May 11 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
python中adb有什么功能
2020/06/07 Python
详解Python 循环嵌套
2020/07/09 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
python自动生成sql语句的脚本
2021/02/24 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
主治医师岗位职责
2013/12/10 职场文书
给同事的道歉信
2014/01/11 职场文书
建筑系毕业生自我鉴定
2014/01/24 职场文书
投标承诺书范本
2014/03/27 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android