基于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 Keycode对照表
Oct 24 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
vue实现简单loading进度条
Jun 06 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
JavaScript实现切换多张图片
Jan 27 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时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
php探针不显示内存解决方法
2019/09/17 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
四风对照检查剖析材料
2014/10/07 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
执行力心得体会范文
2016/01/11 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
MySQL 计算连续登录天数
2022/05/11 MySQL
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技