Answers for "how to call api using ajax in javascript"

3

how to make ajax request javascript

//Change the text of a <div> element using an AJAX //request:
//using JQuery


$("button").click(function(){
  $.ajax({url: "demo_test.txt", success: function(result){
    $("#div1").html(result);
  }});
});



//To send a request to a server, we use the open() //and send() methods of the XMLHttpRequest object:
// Javascript


xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

//example below
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>


<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "demo_get.asp", true);
  xhttp.send();
}
</script>

</body>
</html>
Posted by: Guest on January-17-2020
0

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");
                        }
                    });
                
            });
Posted by: Guest on July-08-2020

Code answers related to "Javascript"

Browse Popular Code Answers by Language