JQuery Ajax Post Example

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.

Make Ajax Call using JQuery

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)

Add JQuery Reference

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

url
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",
```

data

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)

success
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);  
}
```
error
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

contentType: 'application/json; charset=utf-8'

JQuery Ajax Call Example

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:

Jquery Ajax Examples

Learn how to use jQuery in webpage development; most popular jQuery library is free, use built-in functions that are browser compatible.

Learn JavaScript Programming

Learn JSON

Learn TypeScript

Learn Angular JS

Node Programming Tutorial

jQuery Examples | JavaScript Online Course