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 autocomplete插件修改
Apr 17 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
js实现登录验证码
Dec 22 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 Javascript
vue实现前端列表多条件筛选
Oct 26 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 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
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
Python request post上传文件常见要点
2020/11/20 Python
出生医学证明书
2014/09/15 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
社保转移委托书范本
2014/10/08 职场文书
钳工实训报告总结
2014/11/04 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
浅析Python实现DFA算法
2021/06/26 Python
工厂无线对讲系统解决方案
2022/02/18 无线电
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技