POST 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 POST API request in HTML/web app using jQuery and AJAX? POST request used to send data to the server.

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 POST API request

In this example we are about to add data into the server using API POST method.

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. By default API call will make GET request

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

 $("#submit-btn").on("click", function () {
    var inputUname = $("#input-uname");
    var inputEmail = $("#input-email");
    var inputPass = $("#input-passwd");
  
    $.ajax({
      url: "/api/user",
      method: "POST",
      contentType: "application/json",
      data: JSON.stringify({
        uname: inputUname.val().trim(),
        email: inputEmail.val().trim(),
        pass: inputPass.val().trim(),
      }),
      success: (response) => {
        alert("New user created");
        inputUname.val("");
        inputEmail.val("");
        inputPass.val("");
        $("#btn-get").click();
      },
      error: (err) => {
        alert("Please fill the boxes");
      },
    });
  });

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.
  • method – POST/GET
  • data – a JSON data to the server
  • Success – function that will execute after the call made successfully
  • error : – can be arrow function for handling errors

The success function return a response , in which our retiring data is packed. In this example the new user object.

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.