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:"/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
}
Share your thoughts in the comments
Please Login to comment...