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 相关文章推荐
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
vue之nextTick全面解析
May 17 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
小程序实现密码输入框
Nov 16 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常用代码
2006/11/23 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
Python修改列表值问题解决方案
2020/03/06 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
NULL是什么,它是怎么定义的
2015/05/09 面试题
工程管理造价应届生求职信
2013/11/13 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
市场总经理岗位职责
2014/04/11 职场文书
六年级小学生评语
2014/12/26 职场文书
二婚主持词
2015/06/30 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
nginx rewrite功能使用场景分析
2022/05/30 Servers
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android