How to Use jQuery’s ajax() Function for Asynchronous HTTP Requests ?
Last Updated :
23 Jul, 2025
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.
| url | A string containing the URL to which the request is sent. |
| type | A type of http request e.g. POST, PUT and GET. Default is GET request. |
| contentType | A string containing a type of content sent to the server. |
| dataType | The type of data that you're expecting back from the server, JSON, XML, etc. |
| success | A callback function to be executed when Ajax request succeeds. |
| error | A callback function to be executed when the request fails. |
| data | A data to be sent to the server. It can be JSON object, string or array. |
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 receives.'''
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
}
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing