In this tutorial, you will learn how to make Ajax call (Asynchronous HTTP Request) using jQuery, how to make Ajax call using JQuery example.
You may have question that what is ajax post or ajax call!
Ajax stands for Asynchronous JavaScript and XML,
Asynchronous call is posting and loading partial data without loading the entire page again,
which brings very good user experience, that's why demand Ajax usage of any web application growing day by day.
<script> $("#btnInfo").click(function(){ $.ajax( { url: "url-path-to-post", data: JSON.stringify(jsonObject), type:"post", dataType: "json" }); }); </script>
Above code is a simple jquery post example, make sure you have right jquery file reference added in your page before the above script.
In modern web development Ajax plays very important role, JQuery library provide a powerful mechanism for making Ajax request , you can send request to any server side technologies like Java, Asp.net, Php, Python etc.
The best part of JQuery Ajax is that you can work with any server side technology, the code remain same, only you have to specify the server side path in url property, and it will work fine. you can make call to any external API.
Here I teach you about jQuery’s most used Ajax built-in method and options that helps making Ajax call just with few lines of code.
$.ajax(options)
Before you write any JQuery function you must add jquery reference either from CDN or from your local script folder.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Here is a simple example of making ajax call on button click
<script> $(document).ready(function(){ $("#btnInfo").click(function(){ $.ajax( { url: "page-or-view-name", data: JSON.stringify(model_data), type:"post", dataType: "json", success: function(result){ $("#div1").html(result); } }); }); }); </script>
You need to understand following attributes in jquery ajax call
The URL for the request, this has to be full Url where we want to make the call.
url: "/mycontroller/myaction", OR url: "/my-page-name.php",
This can either be a query string or an object, we can pass parameters value using this attribute
data: JSON.stringify(model_data),
You can pass data either with query string like
page-name?id=10001&name=Abishkar&Age=31
Or you can pass a JSON object
var data = { ID: '10001', Name: 'Abishkar', Age: 31 }; data: JSON.stringify(data)
This attribute is a callback function to run if the request succeeds. Success function receives the response data (converted to a JavaScript object if the DataType was JSON), and text status of the request in the form or JavaScript object.
Success: function (result) { $('#result').html(result); }
This attribute is a callback function to run if the request fails. Error function receives the response data, where we can get information about why error occurred.
error: function(data) { alert(data.msg); }
contentType: 'application/json; charset=utf-8'
Now this is how the Ajax call using JQuery will look like
<script> $(document).ready(function(){ $("#btnInfo").click(function(){ $.ajax( { url: "page-or-view-name", data: JSON.stringify(model_data), type:"post", dataType: "json", success: function(data){ $("#div1").html(data.msg); }, error: function(errormessage) { alert(errormessage); } }); }); }); </script>
Note: in above error callback function we are displaying error message as string, but if the error message in object form, then you need to find the property of that object to see the error message
You may be interested to read following posts: