Loading Content with load()
In this page:
What is load()?
load() is jQuery's shorthand AJAX method -- it fetches HTML from a URL and inserts it straight into a chosen element, combining the request and the DOM update into one call. It's the simplest of jQuery's AJAX helpers, since it doesn't require a separate success callback just to display the result.
Example: What is load()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
$("#content").load("data.php");
</script>
</body>
</html>Load with a Callback
A callback function passed to load() runs after loading finishes, receiving the response text, status, and XHR object. It's useful for showing a confirmation message or checking whether the load actually succeeded before assuming the content is ready.
Example: Load with a Callback
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
$("#content").load("data.php", function(response, status, xhr) {
console.log("Load status:", status);
});
</script>
</body>
</html>Load into Different Elements
You can target any element as load()'s destination, which makes it easy to refresh just one section of a page -- like a comments list or a sidebar -- instead of reloading the whole document. Only the chosen element's contents are replaced.
Example: Load into Different Elements
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="sidebar"></div>
<div id="comments"></div>
<script>
$("#comments").load("data.php");
</script>
</body>
</html>Load and Show Status
Combining load() with a status message -- 'Loading...' before the call, then clearing it in the callback -- gives the user simple, immediate feedback that something is happening. This avoids a blank or frozen-looking section while the request is in flight.
Example: Load and Show Status
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="content">Loading...</div>
<script>
$("#content").load("data.php", function() {
console.log("Load complete");
});
</script>
</body>
</html>Small load() Project
The load() method is useful when one part of a page needs fresh content, such as a live comment count or a snippet included from another file, while the rest of the page stays unchanged. It's often the quickest way to add dynamic content without writing a full $.ajax() call.
Example: Small load() Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<span id="commentCount">Loading...</span>
<script>
$("#commentCount").load("data.php");
</script>
</body>
</html>Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: