Answers for "javascript api in place of ajax"

jquery ajax request

// Using the core $.ajax() method
$.ajax({
 
    // The URL for the request
    url: "post.php",
 
    // The data to send (will be converted to a query string)
    data: {
        id: 123
    },
 
    // Whether this is a POST or GET request
    type: "GET",
 
    // The type of data we expect back
    dataType : "json",
})
  // Code to run if the request succeeds (is done);
  // The response is passed to the function
  .done(function( json ) {
     $( "<h1>" ).text( json.title ).appendTo( "body" );
     $( "<div class=\"content\">").html( json.html ).appendTo( "body" );
  })
  // Code to run if the request fails; the raw request and
  // status codes are passed to the function
  .fail(function( xhr, status, errorThrown ) {
    alert( "Sorry, there was a problem!" );
    console.log( "Error: " + errorThrown );
    console.log( "Status: " + status );
    console.dir( xhr );
  })
  // Code to run regardless of success or failure;
  .always(function( xhr, status ) {
    alert( "The request is complete!" );
  });

Call the web api from $.ajax() function.

1- Calling the web api method without parameter
•	If  you do not have parameter in your web API method then you no need to pass the data parameter inside AJAX function.
•	The URL parameter of ajax function must match with the Route attribute of web api method.

o	Your web api controller action method.
       
       [HttpGet]
        [Route("student/Get")]
        public IEnumerable<string> Get()
        {
            return new string[] { "student1", "student2" };
        }

o	Your ajax function
$('#btnBindDropDown').on('click', function () {
                $('#btnBindDropDown').click(function () {
                    $.ajax({
                        type: 'GET',
                        url: 'student/Get',
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        success: function (data) {
                            alert('data is ' + data);
                        },
                        error: function () {
                            alert("INSIDE FAILURE");
                        }
                    });
                });
                
            });

2-	Now calling the web api method with  parameter


o	Your web api controller action method.

 [HttpGet]
        [Route("student/GetWithId")]
        public int Get(int Id)
        {
            return Id;
        }

o	Your ajax function

•	The Id property must match with web api method parameter.


$.ajax({
                        type: 'GET',
                        url: 'student/GetWithId',
                        data: { Id: 101 },
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        success: function (data) {
                            alert('data is ' + data);
                        },
                        error: function () {
                            alert("INSIDE FAILURE");
                        }
                    });

3-	calling the web api method by passing object 

o	Your web api controller action method.

 [HttpPost]
        [Route("api/student/names1")]
        public Employee GetEmployee(Employee employee)
        {
            employee.Id = 101;
            employee.Name = "Kaushal";
            return employee; 
  }

o	Your ajax function
•	The object name ‘employee’ must match with the web api method parameter
•	The URL name can be anything , But both should match.
i.e  Route attribute of web api method and URL parameter of ajax function.
•	If you are passing object then you will use JSON.stringfy function.
•	If webApi method is not returning anything then the parameter  dataType: 'json', 
Is optinal. This parameter is required if webapi method is returning something and you want to do something with the returned data.

$('#btnBindDropDown').click(function ()
            {
                var employee = { Id: 101, Name: "Love singh" };  
                    $.ajax({
                        type: 'POST',
                        url: 'api/student/names1',
                        data: JSON.stringify(employee),
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        success: function (data) {
                            alert('data is ' + data);
                        },
                        error: function () {
                            alert("INSIDE FAILURE");
                        }
                    });
                
            });