Skip to content
Related Articles

Related Articles

jQuery getJSON() Method

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 24 Nov, 2021
View Discussion
Improve Article
Save Article

In this article, we will learn about the getJSON() method in jQuery, along with understanding their implementation through the example. jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for its philosophy of “Write less, do more”

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 a 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 that specifies data that will be sent to the server.
  • callback: It is also an optional parameter that runs when the request succeeds.

Return Value: It returns XMLHttpRequest object.

Please refer to the jQuery Tutorial and jQuery Examples articles for further details.

Example: The below example illustrates the getJSON() method in jQuery.

employee.json file:


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

Here, we get the JSON file and displays its content.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>jQuery getJSON() Method</title>
    <script src=
    </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:

 getJSON() Method


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!