基于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 相关文章推荐
jquery 无限级联菜单案例分享
Mar 26 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
js编写的treeview使用方法
Nov 11 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
用户注册常用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 遍历文件实现代码
2011/05/04 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
详解YII关联查询
2016/01/10 PHP
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
小小聊天室Python代码实现
2016/08/17 Python
Python实现的端口扫描功能示例
2018/04/08 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
Python 高效编程技巧分享
2020/09/10 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
html5 标签
2009/07/16 HTML / CSS
大学专科求职信
2014/07/02 职场文书
出生公证书
2015/01/23 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
九年级数学教学反思
2016/02/17 职场文书