Get Data From Web-API Using JQuery Ajax

In this blog, we will understand how to call Web-API, using jQuery AJAX function. We know that Web-API is a new version of Microsoft’s Service oriented Application. It’s fully RESTful Service, which can be consumed by HTTP verb. If you are not aware about HTTP verb, then this small discussion is for you.

  • GET
    When we click on any one link, generally we make GET request to the Server. To get GET any resource, we have to make GET request.

  • POST
    When we want to POST data to the server, we have to make POST request.

  • PUT
    This request is needed, when we want to make an update operation to the Server.

  • DELETE
    We can perform delete operation, when we want to delete any resource.

As we have now understood, the basic idea about RESTful service is the one, where we will understand how to make AJAX call with Web-API.

Step 1
 
Create Web-API(Services) in MVC

Now, we will create Web-API in MVC project template. Thus, open one MVC Web Application and choose Web-API template. 

GET method will return an array of the string in JSON format.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Net;  
  5. using System.Net.Http;  
  6. using System.Web.Http;  
  7. namespace Webapiservice.Controllers {  
  8.     public class Webapiservice: ApiController {  
  9.         [Route("api/GetCompanies")]  
  10.         [HttpGet]  
  11.         public HttpResponseMessage GetCompanies() {  
  12.             var result = _Companyrepository.GetAll();  
  13.             HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK, result);  
  14.             return response;  
  15.         }  
  16.     }  
  17. }  
Step 2
 
Create Client Application AJAX call
  1. <script>  
  2.     $(document).ready(function() {  
  3.         $.ajax({  
  4.             url: 'http://localhost:3002/api/GetCompanies',  
  5.             -- -- -- -- -- -- -- -- -- -- -- -- - > It 's represent url of api  
  6.             type: 'GET',  
  7.             -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - > we need to set whether we getting / posting the data  
  8.             dataType: 'json',  
  9.             -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- > type of data  
  10.             success: function(data, textStatus, xhr) {  
  11.                 -- -- -- -- -- -- -- > here we can the result from data object  
  12.                 console.log(data);  
  13.                 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - > here you can proceed to get the data  
  14.             },  
  15.             error: function(xhr, textStatus, errorThrown) {  
  16.                 console.log('Error in Database');  
  17.                 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - >  
  18.                 if any error caught  
  19.             }  
  20.         });  
  21.     });  
  22. </script>  
Ebook Download
View all
Learn
View all