Free Web Development Online Tutorials, Learn to Code
Learn Jquery Ajax, How to make Ajax call using jQuery, jquery and ajax tutorial for Beginners

JQuery Ajax Example

Make Ajax call using JQuery Example

Make Ajax Call using JQuery

In this article you will learn how to make Ajax call (Asynchronous HTTP Request) 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

 
Jquery Ajax Tutorial with Examples



jQuery Examples | JavaScript Online Course