jQuery getJSON() Method (original) (raw)

Last Updated : 12 Jul, 2023

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 `

<!-- 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>

<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" />

`

**Output:

getJSON() Method