Open In App

jQuery getJSON() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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



Last Updated : 12 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads