Consuming JSON and XML Webservices from an HTML Page using jQuery
page 3 of 4
by Rajesh Toleti
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 32304/ 84

PART2 (JSON Webservices)

We will use the same webservices but a different web method (service1.asmx/JSONCountry) which emits JSON when it is invoked. The JSON string showed in the Listing3

 

Listing 3

      [{"Name":"India","Capital":"NewDelhi"},{"Name":"UK","Capital":"London"},
{"Name":"France","Capital":"Paris"}]
  

 

As you can see this JSON string contains 3 countries and their capitals. We are going to invoke this webservice from our JQuery code and write the response in a simple table format like in the PART1

 

Listing 4

 

        <script src="JS/jquery-1.4.2.min.js" language="javascript"></script>
        <script type="text/javascript">
        $(document).ready(function() {  
                     $.ajax({
        type: "Post",       
        url: "service1.asmx/JSONCountry",        
        contentType: "application/json; charset=utf-8",
        success: function(msg) { 
            var data = $.parseJSON(msg.d); 
            var content = "<table cellspacing=0 border=1>" + 
"<tr><td><strong>Country</strong></td> <td> <strong>Capital</strong></td></tr> " ;
           $.each(data, function(i) { 
                content = content + " <tr> <td> " + data[i].Name + "</td> <td> " +
                    data[i].Capital+ "</td> </tr> ";
                                                      });
            content = content + " </table> ";
            $("#JSONContent").html(content); 
                                           },
        error: function(msg) {
        alert('Error occurred');
                                    }
 
                         });
        
                                 })
    </script>

 

The first few lines of code are same as in Listing 2 with the same explanation. So let us start from the settings. The first setting is 'type' and the value is 'Post'.

The second setting is 'url' and the value is 'service1.asmx/JSONCountry'. We are calling 'JSONCountry' web method which emits JSON, shown in Listing3.

 

The third setting is 'contentType' and the value is 'application/json; charset=utf-8'. Here we are requesting the return data type as JSON.

The fourth setting is 'success'. The value is a function, which take the JSON and convert it to a string. The parameter in this function is 'JSONResponse'. This can be any name.

The first line of the code within the function is very important. ie

"var data = $.parseJSON(JSONResponse.d);"

Here parseJSON method is used, as name suggests it parses 'JSONResponse' into a variable called 'data'. Instead using JSONRepsone directly, we should use 'd' attribute. Please visit the links in the Reference section for more explanation about this 'd' attribute. Same as in Part1 we create the string 'content' and build HTML table. We will run through each element in the variable 'data' using '$.each' function. Name of the country is obtained by data[i].Name and capital is by data[i].Capital. As shown in the above listing we add them in the html table. We declare a division with id 'JSONContent' in the body of HTML page. We will place HTML content in that division in this way      

             $("#JSONContent").html(content);

The last setting is the error, same as explained in the Part1.When you run this page successfully you should be able to see 3 countries and thei capitals in a table.


View Entire Article

User Comments

Title: Data cant shown in Google Chrome   
Name: Khoo
Date: 2012-08-02 6:32:43 AM
Comment:
Great explanation! It helps me a lot! Thanks!
It works fine in IE.
However, the table with no data shown in Google Chrome.
Any idea?
Title: paging   
Name: vinay
Date: 2011-04-19 7:29:48 AM
Comment:
good post but i have one more thing that is how can i do paging for the table created using json data






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2021 ASPAlliance.com  |  Page Processed at 2021-12-08 1:55:48 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search