基于jQuery的ajax功能实现web service的json转化


Posted in Javascript onAugust 29, 2009

不过这篇文章的题目我真不知道该怎么起,如果你因为这个差劲的题目错过这个东西,那真的很可惜。

我在做这个东西之前参考了不少文章:

http://www.roseindia.net/tutorials/json/parse-message-JSON-JS.shtml

http://www.json.org/js.html

http://funkatron.com/site/comments/safely-parsing-json-in-javascript/

http://docs.jquery.com/Ajax/jQuery.getJSON

http://encosia.com/2009/06/29/never-worry-about-asp-net-ajaxs-d-again/

http://encosia.com/2009/04/07/using-complex-types-to-make-calling-services-less-complex/

http://www.isolutionteam.co.uk/json-jquery-ajax-aspnet-and-c-to-get-ajaxed-data-table-rows-passing-multiple-parameters/

第一步需要做的是如何在Server端把一个datatable转坏为自己需要的那种格式:

本来想使用.net的javascriptSerializer来完成的(结合Genirics库的List等),但是后来发现使用NewtonSoft.Json更加灵活,而且扩展性比较好,甚至在网上有找到一些代码能够现成使用。

 

先看看我在Server端如何实现了Data转化:

 

基于jQuery的ajax功能实现web service的json转化

这里不仅能够转换Datatable还有DataSet,以后再扩展JavascriptSerializer的转换功能。需要注意的是转化的最终结果需要是个[]包着的一段字符串.开始我试着使用{}来最终返回json为对象,结果在客户端真的是没有头绪根本就无法转换。最后看到一篇文章介绍,在.net 3.5中你的web Services返回来的结果会自动打包成一个json对象,且名字为d,如:{“d”:***}.所以我只有在服务器端的生成一个array形式的包。

然后我创建了一个数据库表,内容如下:

 

,基于jQuery的ajax功能实现web service的json转化

定义的web方法如下:

 

基于jQuery的ajax功能实现web service的json转化

Serializer方法已经在DNA_JSON中打包好。它是在NewtonSoft.Json的基础转换类基础上扩展的。

 

第二步是客户端的东西:

首先我们需要用到几个js, jQuery.js, json2.js就OK了。

 

基于jQuery的ajax功能实现web service的json转化

上面图所示我们用到了jQuery的ajax和JSON。Parse()转换函数。

还有需要注意的是res.d它是.net 3.5默认为你打包好的json的属性。如果你使用framework2.0就没有这个问题了。

最后是看看如何把这些ojbect组成的array显示在一个table中,代码如下:

<script type="text/javascript"><!-- 
function BuildTable(msg) { 
if ($('#tblResult').length != 0) // remove table if it exists 
{$("#tblResult").remove();} 
var table = '<table class="table.display"><thead> <tr><th>First Name</th> <th>Last Name</th><th>Email</th></thead> <tbody>'; 
for (var i=0;i<=msg.length-1;i++) { 
var row = '<tr>'; 
row += '<td>' + msg[i].UserName+ '</td>'; 
row += '<td>' +msg[i].FirstName+ '</td>'; 
row += '<td>' + msg[i].email + '</td>'; 
row += '</tr>'; 
table += row; 
} 
table += '</tbody></table>'; 
$('#example1').html(table); 
} 
// --></script>

如果还有需要源代码的请留言。接下来我会试着去使用这个方法把一些jQuery的ajax插件介绍给大家,然后把一些datagrid的插件封装成asp.net控件,这样你就不需要使用微软那笨重的datagrid了。
Javascript 相关文章推荐
可输入的下拉框
Jun 19 Javascript
jquery中输入验证中一个不错的效果
Aug 21 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
用户注册常用javascript代码
Aug 29 #Javascript
csdn 博客中实现运行代码功能实现
Aug 29 #Javascript
js 分栏效果实现代码
Aug 29 #Javascript
javascript 简练的几个函数
Aug 29 #Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 #Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 #Javascript
javascript 遍历验证所有文本框的值
Aug 27 #Javascript
You might like
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
php实现的农历算法实例
2015/08/11 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
Python探索之自定义实现线程池
2017/10/27 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
英国探险旅游专家:Explore
2018/12/20 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
Servlet的生命周期
2013/08/25 面试题
理工科学生的自我评价
2013/12/15 职场文书
便利店投资的创业计划书
2014/01/12 职场文书
八年级语文教学反思
2014/02/11 职场文书
现场施工员岗位职责
2014/03/10 职场文书
小学班主任寄语大全
2014/04/04 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
个人作风建设总结
2014/10/23 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
公司庆典欢迎词
2015/01/26 职场文书
工作证明格式范文
2015/06/15 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书