In this article, we'll explore how to create a jQuery AJAX GET request with parameters. In jQuery, there are several functions available for making AJAX requests, such as load, get, and post.
These functions, namely load, get, and post, internally utilize the jQuery AJAX function. While these wrapper methods are convenient to use, they may lack the flexibility needed in certain scenarios.
The AJAX method in jQuery offers comprehensive control over the AJAX request, allowing us to configure its behavior extensively. Below is the syntax of the jQuery AJAX method:
With the AJAX method, you pass a single JavaScript object containing all the options necessary to define the behavior of the AJAX request. This approach offers greater flexibility and customization compared to the wrapper methods like load, get, and post.
We have created an HTML and on this page, we have all the options available that we can use with this Jquery Ajax ,For our demo purpose, we have a rest API that returns the list of tourists in a travel agency. Below is the response of API.
Now I want to fetch data from API and display it in HTML Table for that I’m going to use the ajax function.
Ajax call rest API with parameters
Ajax GET example with parameters, Let’s take an example where we need to pass the parameter in the rest API.
Api Url: http://samplerestapi.com/api/Tourist/7
Json Response:
{
"id": 86,
"tourist_name": "ap",
"tourist_email": "[email protected]",
"tourist_profilepicture": "http://samplerestapi.com/Media//Images/userimageicon.png",
"tourist_location": "USA",
"createdat": "2020-06-02T05:18:22.7652253"
}How to pass parameters in GET requests with jQuery
Specify the URL to which you want to make a request, then you use this URL option. specify whether you want to issue a GET or a POST request.
you want to issue a get request, you specify GET. If it is POST, then specify POST. For calling a function when the request completes successfully, we have success option in the Ajax method. If any error occurred in the request, then we have the error option. using data option we can parameters in the ajax method.
This jQuery code snippet demonstrates an AJAX GET request to a REST API endpoint. Let's break down what each part of the code does:
- $.ajax({ ... }): This initiates the AJAX request. Inside the object passed to $.ajax, various settings are configured for the request.
- url: 'http://samplerestapi.com/api/Tourist': Specifies the URL of the API endpoint to which the request will be sent.
- dataType: 'json': Specifies the expected data type of the response, which is JSON in this case.
- data: { id: 86 }: This parameter sends data along with the request. Here, it sends an object with the parameter id set to 86.
- contentType: 'application/json; charset=utf-8': Specifies the content type of the request payload. In this case, it indicates that the payload is JSON-encoded.
- success: function (result) { ... }: Defines a callback function to be executed if the request succeeds. The result parameter contains the response from the server.
- if (result != null) { ... }: Checks if the response (result) is not null before proceeding. If the response is not null, it constructs an HTML table row (<tr>) containing data from the response.
- $("#tblbody").append(tablerow);: Appends the constructed table row to the HTML element with the ID tblbody.
This code sends a GET request to the specified API endpoint, retrieves data based on the provided ID, and dynamically adds the received data to an HTML table on the web page.
$.ajax({
url: 'http://samplerestapi.com/api/Tourist',
method: 'GET',
dataType: 'json',
data: {
id: 86,
},
contentType: 'application/json; charset=utf-8',
success: function (result) {
debugger;
if (result != null) {
var tablerow = "<tr>"
+ "<td>" + result.id + "</td>"
+ "<td>" + "<img style='width:20px;border-radius:50px' src=" + result.tourist_profilepicture + ">" + result.tourist_name + "</td>"
+ "<td>" + result.tourist_email + "</td>"
+ "<td>" + result.tourist_location + "</td>"
+ "</tr>";
$("#tblbody").append(tablerow);
}
},
fail: function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
}
})Real-time Example
API Calling:
<!DOCTYPE html>
<html>
<head>
<title> Call Get api using ajax </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1> Calling rest api from javascript/jquery </h1>
<br />
<fieldset>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>TouristName</th>
<th>TouristEmail</th>
<th>Location</th>
</tr>
</thead>
<tbody id="tblbody"></tbody>
</table>
</fieldset>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
GetTouristById()
});
//get tourist information by id
function GetTouristById() {
$.ajax({
url: 'http://samplerestapi.com/api/Tourist',
method: 'GET',
dataType: 'json',
data: {
id: 86,
},
contentType: 'application/json; charset=utf-8',
success: function (result) {
debugger;
if (result != null) {
var tablerow = "<tr>"
+ "<td>" + result.id + "</td>"
+ "<td>" + "<img style='width:20px;border-radius:50px' src=" + result.tourist_profilepicture + ">" + result.tourist_name + "</td>"
+ "<td>" + result.tourist_email + "</td>"
+ "<td>" + result.tourist_location + "</td>"
+ "</tr>";
$("#tblbody").append(tablerow);
}
},
fail: function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
}
})
}
</script>
If you have knowledge of JavaScript, HTML, JSON, and XML then you can easily learn AJAX very easily.
AJAX uses XHTML for content and CSS for presentation, along with Document Object Model and JavaScript for dynamic content display.
AJAX is a technology with the help of which the information is brought from the server to the page without refreshing the page ,is used a lot in creating a dynamic website because all the processing of AJAX happens in the backend and information can be brought from the server to the page without reloading the page.
This is a function of jQuery’s AJAX, with the help of which you can send data from the page to the server.
URL – In this, you have to give the path of your rest API or URL in which your server Code is written.
Type – In this you have to send a request from both Get and POST.
Data – In this you have to send your data, here you can also send Array and Variable.
Datatype – In this, you can give JSON because only JSON is used to send Array in AJAX, if you do not send Array then it is not necessary to write datatype.
Cache – You have to keep this False otherwise the browser can send the request from its own cache and an error can come.
Success – If your Function is successful, then whatever data you get back from the PHP file will come in a variable called S of Success Function.
Error – If an error occurs in Ajax, then that error message will come in the err variable.