Handling JSON Response within HTML page

In this post, we will be handling JSON response within HTML page. From the earlier post, we have seen how to create a Simple API using PHP with JSON response, now we will be getting a JSON Response, from the API.  In this tutorial, we will be handling JSON Response within HTML page. We will be using jQuery, for this purpose. jQuery has ajax() as well as getJSON() methods. This post, will basically, demonstrate the usage of the getJSON() method using the PHP API, which we have already created.

What are we going to do in this post?

  • Create a form containing username and password input tags
  • Using jQuery, getJSON(), we will handle the JSON response
  • Verify the values and then set actions.

So first let us create a form, using HTML having 2 input type text tags, and a button to which, we will be attaching an on click function which will be calling the API and getting the JSON Response.

Now let us see the javascript part, it will contain an on click function, for the login button, then inside the on click event, there will be a call to getJSON() function of jQuery which will handle the JSON response from the Server. The getJSON() has two parameters, one is the URL of the server, and another is the result object, which stores the response obtained from the server. getJSON() is an asynchronous function.

Inside the on click event, there is getJSON() function, where we are checking the values of each key in the JSON Response. We are checking it using a dot operator, i.e. in this example, it is ‘result.check’, now we can know the value of ‘check’ key by referring to the ‘result.check‘.

And, there you go, we have succeeded in Handling JSON Response within HTML page.  If this post was helpful, got any doubts, drop them in the comments below. Share it with your friends, and you guys have a nice day!

Hey there, I’m Sid. I often write articles here. Apart from being a developer, my interest range from blogging, designing, tinkering and hearing electronic. To connect with me, just navigate to any social icons, below!

Sidharth Patnaik

Hey there, I'm Sid. I often write articles here. Apart from being a developer, my interest range from blogging, designing, tinkering and hearing electronic. To connect with me, just navigate to any social icons, below!

Leave a Reply

Your email address will not be published. Required fields are marked *