基于jQuery的ajax功能实现web service的json转化

2016-02-19 15:10 4 1 收藏

下面图老师小编要向大家介绍下基于jQuery的ajax功能实现web service的json转化，看起来复杂实则是简单的，掌握好技巧就OK，喜欢就赶紧收藏起来吧！

【 tulaoshi.com - Web开发】

不过这篇文章的题目我真不知道该怎么起,如果你因为这个差劲的题目错过这个东西,那真的很可惜。

我在做这个东西之前参考了不少文章:

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转化：

这里不仅能够转换Datatable还有DataSet,以后再扩展JavascriptSerializer的转换功能。需要注意的是转化的最终结果需要是个[]包着的一段字符串.开始我试着使用{}来最终返回json为对象，结果在客户端真的是没有头绪根本就无法转换。最后看到一篇文章介绍,在.net 3.5中你的web Services返回来的结果会自动打包成一个json对象,且名字为d,如：{“d”:***}.所以我只有在服务器端的生成一个array形式的包。

然后我创建了一个数据库表,内容如下：

定义的web方法如下：

Serializer方法已经在DNA_JSON中打包好。它是在NewtonSoft.Json的基础转换类基础上扩展的。

第二步是客户端的东西：

首先我们需要用到几个js， jQuery.js, json2.js就OK了。

上面图所示我们用到了jQuery的ajax和JSON。Parse（）转换函数。

还有需要注意的是res.d它是.net 3.5默认为你打包好的json的属性。如果你使用framework2.0就没有这个问题了。

最后是看看如何把这些ojbect组成的array显示在一个table中,代码如下:

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）代码如下:
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 trthFirst Name/th thLast Name/ththEmail/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了。

来源:https://www.tulaoshi.com/n/20160219/1609074.html

上一篇：在Apache中整合JSP和PHP
下一篇： jsp/servlet取参数乱码问题分析

看过《基于jQuery的ajax功能实现web service的json转化》的人还看了以下文章更多>>

基于jQuery的ajax功能实现web service的json转化 02-19
基于JSON的高级AJAX开发技术 02-19
c# JSON返回格式的WEB SERVICE 02-19
利用JQuery方便实现基于Ajax的数据查询、排序和分页功能 02-19
jMessageBox 基于jQuery的窗口插件 02-19
基于jquery的tab切换 js原理 02-19
基于JQuery框架的AJAX实例代码 02-19
基于ajax异步请求的实现 02-19
AJAX的jQuery实现入门(二) 02-19
jQuery DOM操作基于命令改变页面 02-19

AJAX的jQuery实现入门(一)

标签： Web开发

Ajax在网上已经叫喊了好几年了, 但是还是有很多像我这样的新手没掌握它, 像这样能改善交互体验的技术不会用真是很遗憾呢. 所以我就把我学到的记录下来,供高手指正,新手共勉. 首先,稍微扫扫盲: AJAX = Asynchronous JavaScript And XML , 这里有三个关键词: Asynchronous, javascript和XML. 用一个图来表示它们的关系(我自己的理解,若有不妥望...

jquery+json实现的搜索加分页效果

标签： Web开发

1.Web 里面有三个目录: 1.1 content.htm //这个文件直接运行就行 1.2 js //这里面有用到的几个js 文件，其中以db 开头的就是数据源(就是json 串) 1.3 css //css 就不用说了 2. 直接运行 content.htm 就可以直接打开查看分页和搜索效果了 3. 原理很简单，只是用了javascript 的index...

AJAX和JSP实现的基于WEB的文件上传的进度控制代码

标签： Web开发

1.引言 2.实现代码 2.1.服务器端代码 2.1.1. 文件上传状态类（FileUploadStatus） 2.1.2. 文件上传状态侦听类（FileUploadListener） 2.1.3. 后台服务类（BackGroundService） 2.1.4. 文件上传状态控制类（BeanControler） 2.2. 客户端代码 2.2.1. AjaxWrapper.js 2.2.2. fileUpload.html 2.2.3. result.jsp 2.2.4. fileUpload.css 2.3. 配置文...

jquery 获取json数据实现代码

标签： Web开发

代码如下: //栏目 //发送ajax请求 $.getJSON( "../../../Templet/GetInfoHandler.ashx", //产生JSON数据的服务端页面 {id: "0", sid: "1;2;3", rid: Math.round(Math.random() * 10) }, //向服务器发出的查询字符串 //对返回的JSON数据进行处理 function(json) { //循环取json中的数据,并呈现在列表中 $("#column_0_1").empty(); va...

Jquery ajax不能解析json对象报Invalid JSON错误的原因和解决

标签： Web开发

下面说一下，最近在使用jquery 1.4中使用$.ajax()方法解析json对象遇到的问题。 Json对象是：代码如下： [{name:'二手房出售',infoCount:0,pageUrl:'/ershoufang'},{name:'二手房求购',infoCount:0,pageUrl:'/qiugou'},{name:'二手房装修',infoCount:0,pageUrl:'/esfzhuangxiu'},{name:'二手回收',infoCount:0,pageUrl:'/huishou'},{name...

查看更多精彩>>