快捷導(dǎo)航

基于jQuery的ajax功能實(shí)現(xiàn)web service的json轉(zhuǎn)化

更新時(shí)間：2009年08月29日 01:37:18 作者：

前面文章說(shuō)過(guò)下次會(huì)給大家介紹詳細(xì)的基于web Services的JqueryAjax調(diào)用如何把一個(gè)datatable得數(shù)據(jù)轉(zhuǎn)化成JSON數(shù)據(jù),然后在客戶(hù)端再通過(guò)json2.js轉(zhuǎn)化成javascript對(duì)象。

不過(guò)這篇文章的題目我真不知道該怎么起,如果你因?yàn)檫@個(gè)差勁的題目錯(cuò)過(guò)這個(gè)東西,那真的很可惜。

我在做這個(gè)東西之前參考了不少文章:

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端把一個(gè)datatable轉(zhuǎn)壞為自己需要的那種格式：

本來(lái)想使用.net的javascriptSerializer來(lái)完成的(結(jié)合Genirics庫(kù)的List等),但是后來(lái)發(fā)現(xiàn)使用NewtonSoft.Json更加靈活，而且擴(kuò)展性比較好，甚至在網(wǎng)上有找到一些代碼能夠現(xiàn)成使用。

先看看我在Server端如何實(shí)現(xiàn)了Data轉(zhuǎn)化：

這里不僅能夠轉(zhuǎn)換Datatable還有DataSet,以后再擴(kuò)展JavascriptSerializer的轉(zhuǎn)換功能。需要注意的是轉(zhuǎn)化的最終結(jié)果需要是個(gè)[]包著的一段字符串.開(kāi)始我試著使用{}來(lái)最終返回json為對(duì)象，結(jié)果在客戶(hù)端真的是沒(méi)有頭緒根本就無(wú)法轉(zhuǎn)換。最后看到一篇文章介紹,在.net 3.5中你的web Services返回來(lái)的結(jié)果會(huì)自動(dòng)打包成一個(gè)json對(duì)象,且名字為d,如：{“d”:***}.所以我只有在服務(wù)器端的生成一個(gè)array形式的包。

然后我創(chuàng)建了一個(gè)數(shù)據(jù)庫(kù)表,內(nèi)容如下：

,

定義的web方法如下：

Serializer方法已經(jīng)在DNA_JSON中打包好。它是在NewtonSoft.Json的基礎(chǔ)轉(zhuǎn)換類(lèi)基礎(chǔ)上擴(kuò)展的。

第二步是客戶(hù)端的東西：

首先我們需要用到幾個(gè)js， jQuery.js, json2.js就OK了。

上面圖所示我們用到了jQuery的ajax和JSON。Parse（）轉(zhuǎn)換函數(shù)。

還有需要注意的是res.d它是.net 3.5默認(rèn)為你打包好的json的屬性。如果你使用framework2.0就沒(méi)有這個(gè)問(wèn)題了。

最后是看看如何把這些ojbect組成的array顯示在一個(gè)table中,代碼如下:

復(fù)制代碼代碼如下:

<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>