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 相关文章推荐
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
vue使用video插件vue-video-player的示例
Oct 03 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
简单谈谈favicon
2015/06/10 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
浅析Python中的join()方法的使用
2015/05/19 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
python 实现的车牌识别项目
2021/01/25 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
实习协议书范本
2014/09/25 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
单位考核鉴定意见
2015/06/05 职场文书
初二英语教学反思
2016/02/15 职场文书
DSP接收机前端设想
2022/04/05 无线电
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs
python运行脚本文件的三种方法实例
2022/06/25 Python