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>
<head>
<title>jQuery getJSON() Methodtitle>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#fetch").click(function (event) {
$.getJSON('employee.json', function (emp) {
$('#display').html(' Name: '
+ emp.name + '');
$('#display').append('Age : '
+ emp.age + '');
$('#display').append(' Role: '
+ emp.role + '');
$('#display').append(' Company: '
+ emp.company
+ '');
});
});
});
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:
