jQuery | getJSON() Method

Last Updated : 06 Mar, 2019

The getJSON() method in jQuery fetches JSON-encoded data from the server using a GET HTTP request.

Syntax:

$(selector).getJSON(url,data,success(data,status,xhr))

Parameters: This method accepts three parameters as mentioned above and described below:

url: It is required parameter. It is used to specify the URL in the form of a string to which the request is sent
data: It is an optional parameter which specifies data that will be sent to the server.
callback: It is also an optional parameter which runs when the request succeeds .

Return Value: It returns XMLHttpRequest object.

Below example illustrates the getJSON() method in jQuery:

employee.json file:

{
“name”: “Tony Stark”,
“age” : “53”,
“role”: “Techincal content writer”,
“company”:”Geeks for Geeks”
}

Example: This example get the JSON file and display its content.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        jQuery getJSON() Method 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
      
    <!-- Script to get JSON file and display its content --> 
    <script type = "text/javascript" language="javascript"> 
        $(document).ready(function() { 
               
            $("#fetch").click(function(event){ 
                $.getJSON('employee.json', function(emp) { 
                    $('#display').html('<p> Name: ' + emp.name + '</p>'); 
                    $('#display').append('<p>Age : ' + emp.age+ '</p>'); 
                    $('#display').append('<p> Role: ' + emp.role+ '</p>'); 
                    $('#display').append('<p> Company: ' + emp.company+ '</p>'); 
                }); 
            }); 
        }); 
      </script> 
   </head> 
       
   <body> 
      <p> 
          Click on the button to fetch employee data 
      </p> 
           
      <div id = "display" style = "background-color:#39B54A;"></div> 
           
      <input type = "button" id = "fetch" value = "Fetch Employee Data" /> 
        
   </body> 
</html> 

Output:
Before Clicking the button:

After Clicking the button:

My Personal Notes

Related Articles