In this article, we’ll discuss how to make a jQuery ajax GET example with parameters. In Jquery we’ve got several functions to issue Ajax requests. We’ve got a load, get, and post.

All these functions i.e load, get, and post actually calls the Jquery Ajax function. These wrapper methods are easier to use, but they do not provide much flexibility.

Ajax method provides us full control over the Ajax request and we can also configure the behavior of the Ajax request. Below is the syntax of the Jquery Ajax method.In the Ajax method, pass a single JavaScript object, with all the options that define the behavior of the Ajax request.

jquery ajax api call example

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://restapi.adequateshop.com/api/Tourist/7

Json Response:

{
"id": 86,
"tourist_name": "ap",
"tourist_email": "ap.prak96@gmail.com",
"tourist_profilepicture": "http://restapi.adequateshop.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.

 

 $.ajax({
            url: 'http://restapi.adequateshop.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://restapi.adequateshop.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>

Ajax call rest api with parameters

 

 

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.

 

The post jQuery Ajax GET Example with Parameters appeared first on Software Development | Programming Tutorials.



Read More Articles