基于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 相关文章推荐
JS 实现图片直接下载示例代码
Jul 22 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 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中的Session和Cookie
2013/06/21 PHP
Yii快速入门经典教程
2015/12/28 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
详解如何较好的使用js
2016/12/16 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
vue-swiper的使用教程
2018/08/30 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
js判断密码强度的方法
2020/03/18 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
python数组复制拷贝的实现方法
2015/06/09 Python
python僵尸进程产生的原因
2017/07/21 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
基于Python log 的正确打开方式
2018/04/28 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
Python 音频生成器的实现示例
2019/12/24 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
中药专业毕业自荐书范文
2014/02/08 职场文书
住宅质量保证书
2014/04/29 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
合作协议书格式
2014/08/19 职场文书