GET API Call using jQuery and AJAX


With JQuery ( light weight, super Java Script library) we can handle events, dynamically add content to html blocks.

Let’s learn how to make a GET API request in HTML/web app using jQuery and AJAX?

jQuery

jQuery can be placed in a file or with in HTML within <script> </script > , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed.

$(function () {
// code block here
}

HTML

In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.

  <script src="/jquery.js"></script>  -- local version of jQuery library
  <script src="/public/script.js"></script>  -- our script

How to make GET API request

We have learned how create an API and test API with Post Man client. if you miss the post here it is.

We need to access the API in the real world applications. We can use JavaScript for web apps for that and the best way to do is using jQuery and AJAX.

The GET request is used to get a list of data, says product list,users list, customer list etc and the POST send data to the server.

In the script file you can add following code to access the API, in our example it is a list of users

$(function () {
 $("#btn-get").on("click", function () {
   //List users using API with AJAX
‚Äč
   $.ajax({
     url: "/api/user",
     contentType: "application/json",
     success: function (response) {
       // console.log('success');
       var el = $("#usr-group");
       el.html("");
       response.users.forEach(function (usr) {
         el.append('<li class="list-group-item">' + usr.uname + "</li>");
      });
    },
  });
});
});

the AJAX call is made inside the document ready function, which will execute only after the complete web page is loaded. The ajax call has following properties

  • url – the API itself
  • contentType – type of the content , it can be json structured in many cases.
  • Success – function that will excecuted after the call made successfully
  • error : – can be arrow function for handling errors

The success function return a response , in which our data is packed. In this example the users object. we can iterate through the object list and add to the webpage using jQuery.

Some jQuery post will help you to extend the functionality of your app.

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.