基于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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
JS简单计算器实例
Jan 20 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
原生js的数组除重复简单实例
May 24 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
用户注册常用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
php 生成唯一id的几种解决方法
2013/03/08 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
使用正则替换变量
2007/05/05 Javascript
JavaScipt基本教程之前言
2008/01/16 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
python编码最佳实践之总结
2016/02/14 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
python实现实时视频流播放代码实例
2020/01/11 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
Keras自定义IOU方式
2020/06/10 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
关于青春的演讲稿
2014/05/05 职场文书
财会专业大学生求职信
2014/09/26 职场文书
银行贷款委托书范本
2014/10/11 职场文书
运动会加油稿20字
2014/11/15 职场文书
党支部工作总结2015
2015/04/01 职场文书
具结保证书范本
2015/05/11 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
详解Spring事件发布与监听机制
2021/06/30 Java/Android