jQuery 中使用JSON的实现代码


Posted in Javascript onDecember 01, 2011

JSON 的格式说明可以在可以这里看到,非常详细,还是中文的。

JSON 格式说明

需要特别注意的是,在 JSON 中的属性名是需要使用引号引起来的。

 jQuery 中使用 JSON

jQuery 是现在使用广泛的脚本库,那么,在 jQuery 中如何使用 JSON 呢?

jQuery 中使用JSON的实现代码

解析 JSON

在 jQuery 中已经提供了对于解析 JSON 的内在支持,

jQuery.parseJSON 函数提供了解析的支持,详细的说明见这里。

var obj = jQuery.parseJSON('{"name":"John"}'); 
alert( obj.name === "John" );

使用对象生成 JSON 格式串

在 jQuery 中并没有提供直接将普通的 JavaScript 对象转换为 JSON 串的方法,可以使用下面的扩展库来完成。

jquery-json 扩展库

这个库用来扩展 jQuery ,对于 JSON 的使用,扩展了两个方法。

toJSON 方法用来将一个普通的 JavaScript 对象序列化为 JSON 串。

var thing = {plugin: 'jquery-json', version: 2.3}; 
var encoded = $.toJSON( thing ); // '{"plugin":"jquery-json","version":2.3}'

evalJSON 方法将一个 JSON 串解析为一个普通的 JavaScript 对象。
var thing = {plugin: 'jquery-json', version: 2.3}; 
var encoded = $.toJSON( thing ); // '{"plugin":"jquery-json","version":2.3}' 
var name = $.evalJSON( encoded ).plugin; // "jquery-json" 
var version = $.evalJSON(encoded).version; // 2.3

这个扩展的下载地址:http://code.google.com/p/jquery-json/

使用 jQuery 配合 WCF
客户端

jQuery 中的 $.post 可以直接向服务器发出请求,将服务器返回的数据按照 JSON 方式进行解析,不过,需要注意下面几点:

请求的内容类型必须为 json 格式,这可以通过上面的 jQuery-json 扩展库来完成,需要特别注意的在请求的 contentType 也必须使用 text/json 进行说明,默认的 post 使用普通的名值对方式请求,因此 contentType 是: application/x-www-form-urlencoded,可以通过 $.ajaxSetup 来进行设置:

// Ajax 设置 
$.ajaxSetup({ contentType: 'text/json' });

这样,请求的内容类型就设置为需要的类型。

其次,实际的请求内容必须使用 JSON 方式,这可以通过扩展库的 $.toJSON 来实现,例如:

$.toJSON({ x: 2, y: 3 })

这样,如果服务器端提供了一个服务方法 Sum,定义如下:

public int Sum(int x, int y) 
{ 
return x + y; 
}

就可以如下调用了。注意,WCF 返回的数据在属性 d 中。
// Ajax 设置 
$.ajaxSetup({ contentType: 'text/json' }); 
$("#wcfBtn").click(function () { 
$.post("Service1.svc/Sum", $.toJSON({ x: 2, y: 3 }), function (data) { 
alert(data.d); 
}); 
});

服务器端的配置
首先,为服务增加标签:[System.ServiceModel.Activation.AspNetCompatibilityRequirements(
RequirementsMode = System.ServiceModel.Activation.AspNetCompatibilityRequirementsMode.Allowed)]
// #1 
// 为了在脚本中使用,必须增加这个标签 
[System.ServiceModel.Activation.AspNetCompatibilityRequirements( 
RequirementsMode = System.ServiceModel.Activation.AspNetCompatibilityRequirementsMode.Allowed)] 
// #2 
// 在网站的配置文件中也需要进行设定 
public class Service1 : IService1 
{ 
public int Sum(int x, int y) 
{ 
return x + y; 
} 
}

然后,在网站的配置文件中,如下配置。
<system.serviceModel> 
<!-- 为了支持在浏览器端调用 WCF 服务的特定配置 --> 
<serviceHostingEnvironment aspNetCompatibilityEnabled="true"> 
<serviceActivations> 
<!-- relativeAddress 服务的地址 
service 实现服务的类型,全名,包含命名空间,甚至程序集 
factory 是 WCF 系统提供,直接使用 
--> 
<add relativeAddress="Service1.svc" service="MServer.Service1" factory="System.ServiceModel.Activation.WebScriptServiceHostFactory" 
/> 
</serviceActivations> 
</serviceHostingEnvironment> 
<behaviors> 
<serviceBehaviors> 
<behavior name=""> 
<serviceMetadata httpGetEnabled="true" /> 
<serviceDebug includeExceptionDetailInFaults="false" /> 
</behavior> 
</serviceBehaviors> 
</behaviors> 
</system.serviceModel>

jQuery使用JSON的例子
////////////1、在HTML中,有这样一个表单: 
<form method="post" name="searchform" id="searchform" method="/sek.go"> 
<input name="query" value="" type="text" id="query" /> 
<input type=”submit” value="查询"></input> 
</form> 
////////////当然,要想在HTML中使用Js功能,必须在<head/>中加入 
<script type="text/javascript"src="/style/js/ajax.js"></script> 
////////////2、然后在ajax.js文件中加入如下代码 
function userSearch(){ 
var query = $("#searchform input[@name='query']").val(); 
$.post("/userSearch.htm", { query: query } ,function callback(json){ 
var userlist = $.parseJSON(json); 
userList(userlist); 
}); 
} 
/******************************************* 
解释如下: 
1)、"#searchform input[@name='query']";的意思是: 选择id为searchform其下的(name属性值为'query'的)input标签 
2)、$(“”).val()意为要得到(“”)所选中属性的值; 
3)、在$.post()中,第一项参数是指定目标servlet,即要把本post请求发给的那个servlet。 
第二项是本post请求所携带的数据;“:”前的为key或者name,后为value; 
第三项是回调函数,其内若有形参,则表示要对从servlet返回的值进行处理,这里的callback的功能是将JSON对象json转换成了JS对象userlist,然后将JS对象传入函数userList 
3、post请求携带了名为query的参数去了后台,在servlet中进行处理: 
//从名为"query"能的参数中取出post带过来的数据 
String query = request.getParameter("query"); 
if (query != null && !query.isEmpty() 
&& !query.trim().equalsIgnoreCase("")) { 
//如果"query"的值不为空,就用'query'为参数构建HQL语句 
String hql = "from TUser as user where user.userName like '"+ query + "%'"; 
//到库表TUser中进行查询,并得到一个表结构 
List list = weilav3TUserDAO.getListByHQL(hql); 
if (list != null && !list.isEmpty()) { 
//若list不为空,则将其转换成JSON对象,并存入jsonArray中 
JSONArray jsonArray = JSONArray.fromObject(list); 
//下面就是把存有查询结果的JSON对象返给页面 
response.setContentType("text/html;charset=utf-8"); 
PrintWriter out = response.getWriter(); 
out.println(jsonArray); 
…… 
}else {……} 
**************/
Javascript 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 #Javascript
JS代码放在head和body中的区别分析
Dec 01 #Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 #Javascript
js取滚动条的尺寸的函数代码
Nov 30 #Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 #Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 #Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 #Javascript
You might like
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
用Python逐行分析文件方法
2019/01/28 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
团结就是力量演讲稿
2014/05/21 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
2014年除四害工作总结
2014/12/06 职场文书
学生犯错保证书
2015/05/09 职场文书
学校工会工作总结2015
2015/05/19 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
Python中的套接字编程是什么?
2021/06/21 Python
使用Redis做预定库存缓存功能
2022/04/02 Redis