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 相关文章推荐
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
cookie的secure属性详解
Apr 08 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
vuex与组件联合使用的方法
May 10 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
js实现验证码功能
Jul 24 Javascript
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
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
ejs v9 javascript模板系统
2012/03/21 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
Python学习之asyncore模块用法实例教程
2014/09/29 Python
django Admin文档生成器使用详解
2019/07/22 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
上海期货面试题
2014/01/31 面试题
门卫工作岗位职责
2013/12/17 职场文书
高中自我鉴定
2013/12/20 职场文书
老师自我鉴定范文
2013/12/25 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
作文批改评语
2014/12/25 职场文书
四年级学生期末评语
2014/12/26 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
感恩节寄语2015
2015/03/24 职场文书
新员工入职感想
2015/08/07 职场文书