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中before()方法用法实例
Dec 25 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
orm获取关联表里的属性值
2016/04/17 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
详解JavaScript事件循环机制
2018/09/07 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python获取本地计算机名字的方法
2015/04/29 Python
python检测是文件还是目录的方法
2015/07/03 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
python 获取图片分辨率的方法
2019/01/08 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
建筑项目策划书
2014/01/13 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
境外导游求职信
2014/02/27 职场文书
医学专业大学生求职信
2014/07/12 职场文书
学习保证书100字
2015/02/26 职场文书
2015中学学校工作总结
2015/07/20 职场文书
小学毕业教师寄语
2019/06/21 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android