How to Use jQuery’s ajax() Function for Asynchronous HTTP Requests ? - GeeksforGeeks

04 Aug, 2021
In this article, we are going to see how we can use jQuery’s ajax() function to call backend function asynchronously or in other words HTTP Requests. AJAX is a set of web development techniques used by client-side frameworks and libraries to make asynchronous HTTP calls to the server. AJAX stands for “Asynchronous JavaScript and XML”.
In simpler words, you can use Ajax to load data from backend without actually the page reloading. You can also send data to the server in the background, request data and receive data while the page has already loaded. Using ajax gives way better user experience on the application.
Syntax:
$.ajax(url);
$.ajax(url,[options]);
The following table lists downs commonly used options with ajax request.
 
Creating a simple AJAX GET request
Before we can use Ajax, we need to get jQuery in your application. For this article, we will use the Ajax jQuery script available online as in the code below. For the purpose of this article, we will be considering a JSON file where we will be sending an ajax() request and retrieve data from the file.
Let’s consider that the JSON file named “data.json” is inside a folder named data which is in the root directory or in other words the folder where our html file currently is and has the data as shown below.
Note: Remember that you need to be on localhost or some deployed path for ajax requests to work otherwise it will give you a CORS (Cross-Origin Resource Sharing) error.
The data.json file:
[
    {
        "Name":"Aman Prakash Jha",
        "Occupation": "Student"
    },
    {
        "Name":"Sharan Swaroop",
        "Occupation":"SDE-1"
    },
    {
        "Name":"Chiraag Kakar",
        "Occupation":"Sr. Software Engineer"
    }
]
Example:
HTML
<!DOCTYPE html><html>  <head>      <!--Loading the script so that we can use Ajax-->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script></head>  <body>    <h2>Welcome To GFG</h2>      <p>        Default code has been         loaded into the Editor.    </p>      <button id="getData">GET</button>          <script>        $("#getData").click(function (event) {            event.preventDefault();            $.ajax({                url: "data/data.json",                type: "GET",                dataType: "json",                success: function (data) {                                          // This here will print the                    // retrieved json on the console.                    console.log(data);                },                error: function () {                    console.log("Something went wrong");                },            });        });    </script></body>  </html>
 
Output:
[
    {
        "Name":"Aman Prakash Jha",
        "Occupation": "Student"
    },
    {
        "Name":"Sharan Swaroop",
        "Occupation":"SDE-1"
    },
    {
        "Name":"Chiraag Kakar",
        "Occupation":"Sr. Software Engineer"
    }
]
Sending a simple AJAX POST request
Now let’s move on and try sending a “POST” request using the ajax() method.
For this example, we will be using a simple python function written in flask-microframework which will receive the POST request from ajax() and simply return the data. If you wish to know more about flask you can read its official documentation here.
Python
from flask import Flask, redirect, render_template, request  app = Flask(__name__)  @app.route('/data/post_data/', methods = ["GET","POST"])def post_data():    '''Function which is supposed to process the    POST request received from ajax'''    data = None     if request.method == "POST":        '''Stores the Json file that is posted by ajax.        This function simply returns the Json file         it recieves.'''        data = request.get_json()        print(data)        return ({"status":200, "data":data})    return render_template("post.html")  if __name__ == '__main__':    app.run(debug=True)
Example: This is how you can set the HTML with ajax() for the “POST” request.
HTML
<html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>  </head>  <body>    <h2>Welcome To GFG</h2>      <p>Default code has been loaded      into the Editor.</p>      <form method="POST">        <input type="text"               placeholder="Name" id="name">        <button id="btn">POST</button>    </form>    <script>        $("#btn").click(function(event){            event.preventDefault();              var name = $("#name").val();            $.ajax({              url:"/data/post_data/",              type:"POST",              contentType:"application/json",              dataType:"json",              data: JSON.stringify({                name: name,                occupation: "SDE"              }),              success: function(data) {                console.log(data)              },              error: function(data ){                console.log("Something went wrong");              }            });        });    </script>  </body></html>
Output:
{
    data: {name: "Aman Prakash Jha", occupation: "SDE"},
    status:200
}
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
jQuery-Methods
jQuery-Questions
Picked
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
How to Upload Image into Database and Display it using PHP ?
HTML | <img> align Attribute
Types of CSS (Cascading Style Sheet)
HTML Introduction
JQuery | Set the value of an input text field
How to prevent Body from scrolling when a modal is opened using jQuery ?
Scroll to the top of the page using JavaScript/jQuery
How to add options to a select element using jQuery?
jQuery | children() with Examples