The AJAX function based on jquery to realize the JSON transformation of Web service _jquery

But I really don't know what to do with the title of this article, if you miss it because of this bad topic, it's really a pity.

I have consulted a number of articles before doing this thing:

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/

The first step is how to turn a DataTable on the server side to the format that you need:

It was intended to be done using the. NET JavaScriptSerializer (combined with the list of Genirics libraries), but later found that using Newtonsoft.json was more flexible and extensible, and even found some code on the Web to be ready to use.

Let's look at how I implemented the Data transformation on the server side:

This will not only transform the DataTable but also the dataset, and then extend the JavaScriptSerializer conversion function. Note that the final result of the conversion needs to be a [] wrapped string. At first I tried to use {} to end up returning JSON as an object, so the client really didn't have a clue to convert at all. Finally, I saw an article about, in. NET 3.5, the results of your Web services return are automatically packaged into a JSON object with the name D, such as: {"D":* * *}. So I only have a package on the server side that generates an array form.

I then created a database table with the following contents:

,

The Web methods defined are as follows:

The serializer method has been packaged in Dna_json. It is extended on the basis of the Newtonsoft.json transformation class.

The second step is the client's stuff:

First we need to use a few JS, Jquery.js, json2.js on the OK.

We use jquery Ajax and JSON as shown in the image above. Parse () conversion function.

It is also necessary to note that RES.D is a property of the JSON that is packaged by the. NET 3.5. If you use framework2.0, you don't have the problem.

Finally, see how to display these ojbect array in a table with the following code:

Copy Code code as follows:

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

If there is a need for source code, please leave a message. Next I will try to use this method to introduce some jquery Ajax plug-ins to you, and then encapsulate some of the DataGrid plug-ins into ASP.net controls so that you don't need to use Microsoft's clunky DataGrid.