What we’ll learn

In this article you will learn how to get Json response through Javascript/Jquery without implementing any backend knowledge

So the function we are going to use in this article to fetch the response is getJSON(url [,data] [,success]) dont get confused with its parameters as they are very easy to understand:

url
Type: String
A string containing the URL to which the request is sent.
data
Type: PlainObject or String
A plain object or string that is sent to the server with the request.
success
Type: Function( PlainObject data, String textStatus, jqXHR jqXHR )
A callback function that is executed if the request succeeds.

So now lets see how we can implement this:

  1. Lets create an HTML page with a division (div) where we will show our data  and a button that will help to get the data<

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">    </script>
    </head>
    <body>
    
    <button id="myButton">Get JSON data</button>
    <div id="mydiv"></div>
    </div>
    </body>
    </html>
    

    Result:

  2. The above code will create a button on your webpage like :
  3. Now lets implement our script that will help to fetch the data, copy/paste the following script inside your body right above the </body> tag:
    <script>
    $("#myButton").click(function(){
        var path = "http://api.openweathermap.org/data/2.5/weather?q=London,uk";
      $.getJSON(path, function (data)
       {
       document.getElementById("mydiv").innerHTML = data.main.temp;
    
       });
    });
    </script>
    
  4. In the above code i have used Open Weather API that returns you weather information about particular city with complete details in JSON format. In the above code you might noticed the code document.getElementById(“mydiv”).innerHTML that will simply write the response that it will get from data.main.temp in the div called mydiv. Here data.main.temp is accessing the specific property (main) from the response and its sub-property called temp that is returning you the temperature.