基于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 相关文章推荐
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 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人民币金额数字转中文大写的函数代码
2013/02/27 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
python三元运算符实现方法
2013/12/17 Python
详解Python中的多线程编程
2015/04/09 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
Python实现求数列和的方法示例
2018/01/12 Python
详解flask入门模板引擎
2018/07/18 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
HTML5标签使用方法详解
2015/11/27 HTML / CSS
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
元旦晚会主持词
2014/03/24 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
Python first-order-model实现让照片动起来
2022/06/25 Python