Menu Close

How to retrieve data from JSON file using jQuery and Ajax?

How to retrieve data from JSON file using jQuery and Ajax?

To retrieve data from JSON file using jQuery and Ajax, use the jQuery.getJSON( url, [data], [callback] )
The jQuery.getJSON( url, [data], [callback] ) method loads JSON data from the server using a GET HTTP request.

Here is the description of all the parameters used by this method −

  • url − A string containing the URL to which the request is sent
  • data − This optional parameter represents key/value pairs that will be sent to the server.
  • callback − This optional parameter represents a function to be executed whenever the data is loaded successfully.

Let’s say we have the following JSON content in result.json file −

{
"name": "John",
"age" : "30",
"sex": "male"
}

The following is the code snippet showing the usage of this method −

Example

  <head>
      <title>The jQuery Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
       
      <script>
         $(document).ready(function() {
           
            $("#driver").click(function(event){
               $.getJSON('result.json', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
            });
               
         });
      </script>
   </head>
   
   <body>
   
      <p>Click on the button to load result.html file:</p>
       
      <div id = "stage" style = "background-color:#cc0;">
         STAGE
      </div>
       
      <input type = "button" id = "driver" value = "Load Data" />
       
   </body>
Posted in Ajax, JQuery, JSON