jQuery get() method

The get() method is an inbuilt function in jQuery. It loads data from the server using the HTTP GET request. It is used for making a simple GET request. It returns XMLHttpRequest object.

Syntax

Parameter Values

This method includes four parameter values in which one is mandatory, and others are optional. We must have to include the URL parameter to the get() method. The parameter values of the get() method are defined in the following table.

Parameter	Values
URL	It is the URL to which the request is sent. It is a mandatory parameter.
data	It is an optional parameter. It is data sent to the server along with the request. It can be a plain object or a string.
function(data, status, xhr)	This is also an optional parameter. It is a callback function that executes on the successful server request. It also has three parameters that are data, status, and xhr in which data contains the resulting data from the request, status represents the request status like "success", "error", etc., and the xhr contains the XMLHttpRequest object.
dataType	This is also an optional parameter that defines the type of data we are expecting from the server. The type can be "text", "json", "jsonp", "html", "script", and "XML".

Now, let's see a simple example of using the get() method.

Example

In this example, we are making a get request by using the get() method. We are using two parameters of the get() method that are URL and a callback function.

The URL parameter is set to the value test.html. We are using two parameters of the callback function that are data and status in which the first parameter holds the data of the requested page, and the second parameter holds the request status.

In the output, we can see the data load from the server, and the status of the request is success.

test.html

<h1> Hello World </h1>
<h2> Welcome to the javaTpoint.com </h2>

Example2.html

<!DOCTYPE html>
<html>

<head>
<title> jQuery get() method </title>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
</head>

<body>
<h3> This is an example of using the get() method in jQuery </h3>
<p> Click the following button to see the effect. </p>
<button> Click me </button>
<p id = "p1"> </p>
<p id = "p2"> </p>
<script>
$(document).ready(function() {
$("button").click(function() {
$.get("test.html", function(data,status) {
document.getElementById("p1").innerHTML = data;
document.getElementById("p2").innerHTML = "Status: " + status;
});
});
});
</script>
</body>

</html>

Test it Now

Output

After the execution of the above code, the output will be -