HTTP GET with get()
In this page:
What is get()?
$.get() is a shorthand for making a GET-style AJAX request, most often used to read data from a server without modifying anything server-side. It's a simplified version of $.ajax() for the common case of just fetching data.
Example: What is get()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.get("data.php", function(data) {
console.log(data);
});
</script>
</body>
</html>GET with Query Parameters
GET requests can send data as query parameters appended to the URL, and jQuery can build that query string automatically from a plain object passed as get()'s second argument. This is the standard way to pass filters or search terms to a read-only endpoint.
Example: GET with Query Parameters
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.get("data.php", {category: "books", limit: 5}, function(data) {
console.log(data);
});
</script>
</body>
</html>GET Success Callback
The success callback receives the data returned by the server, which you can then use to update the page with jQuery -- populating a list, filling in text, or building a table. The callback only runs if the request actually succeeds.
Example: GET Success Callback
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"></ul>
<script>
$.get("data.php", function(data) {
$("#list").append("<li>" + data.message + "</li>");
});
</script>
</body>
</html>GET Error Handling
A GET request can fail due to network issues or a server error, and chaining .fail() onto the request lets you handle that case cleanly instead of leaving the failure unnoticed. This is especially important for requests triggered by user actions, where silent failure would be confusing.
Example: GET Error Handling
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.get("data.php").done(function(data) {
console.log(data);
}).fail(function() {
console.log("Request failed");
});
</script>
</body>
</html>Small GET Project
The get() method is a good choice for simple read-only requests, like fetching a list of items or checking a status, since it keeps the code shorter than writing out a full $.ajax() configuration object. Reach for the full ajax() method only when you need options get() doesn't expose.
Example: Small GET Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="checkStatus">Check Status</button>
<script>
$("#checkStatus").on("click", function() {
$.get("data.php", function(data) {
console.log("Status:", data.status);
});
});
</script>
</body>
</html>Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: