jQuery | getJSON() Method
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 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 which specifies data that will be sent to the server.
- callback: It is also an optional parameter which runs when the request succeeds .
Return Value: It returns XMLHttpRequest object.
Below example illustrates the getJSON() method in jQuery:
employee.json file:
{
“name”: “Tony Stark”,
“age” : “53”,
“role”: “Techincal content writer”,
“company”:”Geeks for Geeks”
}
Example: This example get the JSON file and display its content.
<!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:
Before Clicking the button:
After Clicking the button:
