基於jQuery的ajax功能實現web service的json轉化_jquery

來源:互聯網
上載者:User

不過這篇文章的題目我真不知道該怎麼起,如果你因為這個差勁的題目錯過這個東西,那真的很可惜。

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

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中,代碼如下:

複製代碼 代碼如下:

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.