How to make a JSON call using jQuery ?
Last Updated :
26 Jul, 2022
Use the getJSON() function in jQuery to load JSON data. The getJSON() function uses a GET HTTP request to retrieve JSON-encoded data from the server. In this article, we will learn about the jQuery getJSON() function and its implementation through examples.
Syntax:
$(selector).getJSON(url, data, success(data, status, xhr))
Parameters: This method accepts three arguments, which are listed below:
- url: The argument URL is necessary. It is used to indicate the URL as a string to which the request is sent.
- data: It is a parameter that is optional and indicates the data that will be transmitted to the server.
- callback: It is also an optional argument that is executed if the request is successful.
Return Value: It gives back an XMLHttpRequest object.
Example 1: In this example, we use the getJSON() function to retrieve JSON data from an external JSON file. There is an external JSON file entitled emp.json that holds an employee's information.Â
The URL and the callback function are two arguments of the getJSON() method that we are utilizing. It fetches JSON-encoded data from the server using a GET HTTP request. The URL parameter has been set to emp.json. The callback function has two parameters data and status. The first argument contains the contents of the requested page, while the second contains the request status. The data load from the server is visible in the output, and the request status is a success.
To retrieve the data from the external JSON file, we have to click the given button.
emp.json:
{
"name": "Vishal Kumar",
"age" : "22",
"gender": "Male",
"salary": 56000
}
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
body {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#output {
background-color: #ecf721;
}
</style>
<script>
$(document).ready(function () {
$("#btn").click(function (event) {
$.getJSON("emp.json", function (emp) {
$("#output").html("<p> Name: "
+ emp.name + "</p>");
$("#output").append("<p>Age : "
+ emp.age + "</p>");
$("#output").append("<p>Gender: "
+ emp.gender + "</p>");
$("#output").append("<p>Salary: "
+ emp.salary + "</p>");
});
});
});
</script>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<p>
Click on the button to load
data from emp.json file
</p>
<div id="output"></div>
<input type="button" id="btn"
value="Get Employee Data" />
</body>
</html>
Output:
Â
Example 2: The following example uses the getJSON() method to load the random quotes from Formastic API.Â
Whenever the user clicks on the given button a request to the API server is made. On successfully receiving data from the server it goes to the done interface which contains a callback function having one parameter called quote. This parameter holds the data of the requested page.
If there is an error in receiving the data, then it goes to the fail callback function having one parameter called err. This parameter holds the error message returned by a server which you can log and try to solve.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style>
body {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#quote {
background-color: #25bf1a;
}
</style>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<p>Click on the button to call API</p>
<div id="quote"></div>
<input type="button" id="btn" value="Call API" />
<script>
$(document).ready(function () {
var forismaticAPI =
"http:.../api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";
$("#btn").click(function () {
$.getJSON(forismaticAPI)
.done(function (quote) {
$("#quote").html("<p> quoteText: "
+ quote.quoteText + "</p>");
$("#quote").append("<p>quoteAuthor : "
+ quote.quoteAuthor + "</p>"
);
$("#quote").append("<p>senderName: "
+ quote.senderName + "</p>");
$("#quote").append("<p>senderLink: "
+ quote.senderLink + "</p>");
$("#quote").append("<p>quoteLink: "
+ quote.quoteLink + "</p>");
})
.fail(function (err) {
console.log(err);
});
});
});
</script>
</body>
</html>
Output:
Â
Similar Reads
How to make a basic dialog using jQuery UI ?
In this article, we will be creating a Basic dialog using jQuery UI. Approach: First, add jQuery UI scripts needed for your project. <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js
1 min read
How to create a simple map using jQuery ?
jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. What are Google Maps? Google Map is a free web-based mapping service application and technology provided by Google. The applic
4 min read
How to use JSON in Ajax jQuery ?
Using JSON in AJAX requests with jQuery is a fundamental aspect of web development. JSON or JavaScript Object Notation, offers a lightweight and structured format for data exchange between a server and a web application. jQuery simplifies this process further through its AJAX functionalities. We wil
3 min read
How to check lock-state of a callback list using jQuery ?
In jQuery, a callback list is an object that stores a list of functions to be executed when a specific event occurs. These functions are called "callbacks". Callbacks are often used in jQuery to perform certain actions after an event has occurred. However, sometimes it may be necessary to check the
3 min read
How to submit a form using ajax in jQuery ?
Submitting a form using AJAX in jQuery allows sending form data to a server asynchronously without reloading the page. This method improves user experience by sending the data in the background and receiving a response without interrupting the user's interaction with the webpage.Syntax:$.ajax({type:
2 min read
How to set timeout for ajax by using jQuery?
In web programming, the Ajax is used so that the resultant data is shown in the one part of the web page, without reloading the page. The user needs to perform the Ajax request and wants the result within a timeframe. In this scenario, the jquery timeout feature is used in the code. Session timeout
4 min read
How to Make a Simple jQuery AJAX Call on Link Click?
To make a simple jQuery AJAX call when a link is clicked, you can use jQuery's .click() method and the $.ajax() function to send a request and handle the response. Here's a basic example to demonstrate how this works:Example: jQuery AJAX Call on Link ClickHTML Structure:HTML<a href="#" id="myLink
2 min read
How to Use jQuery with Node.js ?
jQuery is a popular JavaScript library primarily used for client-side scripting to simplify HTML document traversal, event handling, animation, and AJAX interactions. Although jQuery is designed for the browser, you might find scenarios where you want to use it on the server side with Node.js, such
3 min read
How to select values from a JSON object using jQuery ?
In this article, we will select values from a JSON object and display them on the browser using jQuery. To select values from a JSON object to webpage, we use append() method. This append() method in jQuery is used to insert some content at the end of the selected elements. Syntax: $(selector).appen
2 min read
How to Parse JSON using Node.js?
JSON stands for JavaScript Object Notation. The text-based data exchange format data exchange format allows you to transfer data between different languages and platforms. JavaScript is commonly used to interact with JSON files. JSON parsing is a common task when working with data from APIs, configu
2 min read