How to Use jQuery’s ajax() Function for Asynchronous HTTP Requests ?
Last Updated :
20 Jun, 2022
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>
<script src=
</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():
data = None
if request.method == "POST":
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=
</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:"/https/www.geeksforgeeks.org/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
Difference between synchronous and asynchronous requests in jQuery Ajax
In this article, we'll look at the differences between synchronous and asynchronous JQuery Ajax requests. JQuery provides several built-in methods for requesting data from the server: HTML, TXT, JSON, or String data can be requested. $.ajax() is a popular JQuery method for making synchronous and asy
6 min read
How to use an HTTP GET or POST for Ajax Calls?
Sending an HTTP request to the server using AJAX is the most common way of fetching data these days. It provides us with methods to send and receive data. In this article, we are going to discuss GET and POST methods. GET method: This method is used to GET or RECEIVE the data from a file, API, etc.
3 min read
How to get server response from an AJAX request using jQuery ?
In this article, we will see how we can use jQuery to get the server response to an AJAX request. The jQuery ajax() method implements the basic Ajax functionality in jQuery. It communicates with the server via asynchronous HTTP requests. Syntax:$.ajax(url);$.ajax(url,[options]);Parameters:url: A URL
4 min read
How to create an Asynchronous function in Javascript?
JavaScript is a single-threaded and synchronous language. The code is executed in order one at a time. But Javascript may appear to be asynchronous in some situations. Example: C/C++ Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />
6 min read
How to convert an asynchronous function to return a promise in JavaScript ?
In this article, we will learn how to convert an asynchronous function to return a promise in JavaScript. Approach: You need to first declare a simple function (either a normal function or an arrow function (which is preferred)). You need to create an asynchronous function and then further you need
3 min read
How to Call a Function from Another Script Using jQuery?
To call a function defined in one script file from another script using jQuery, you simply need to ensure both scripts are included correctly in the HTML file and that the function is accessible within the global scope. jQuery itself doesn't change the way JavaScript functions are accessed across sc
2 min read
What is an asynchronous request in AJAX ?
In this article, we will have a deep look into Asynchronous AJAX requests. Basically, AJAX provides two types of requests namely Synchronous AJAX and Asynchronous AJAX. Asynchronous requests in AJAX don't wait for a response from the server whereas synchronous waits for the response. When asynchrono
3 min read
How to Send FormData Objects with Ajax-requests in jQuery ?
In this article, we will see how can we send formData objects with Ajax requests by using jQuery. To send formData, we use two methods, namely, the FormData() method and the second method is serialize() method. The implementation of Ajax to send form data enables the submission of data to the server
4 min read
How to chain asynchronous functions in JavaScript ?
JavaScript is a single-threaded, asynchronous programming language. Thus, some time-consuming operations like I/O, accessing the database, network calls, etc. are performed asynchronously so that it does not interrupt things in the only JS thread. This can be done by asynchronous code like promises
3 min read
How to upload files asynchronously using jQuery?
To upload files from local machine to the server is called file uploading. It works exactly the same as the definition, when we select file from the browser and click submit button, the browser takes file from local machine and submit it to the server and server does its job to save the file to the
2 min read