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