jQuery — Load

Basic load()

$("#content").load("page.html");

load with Callback

$("#content").load("page.html", function(response, status, xhr) {
    if (status === "success") {
        console.log("Content loaded");
    }
});

Load with Selector

// Load only #main from page.html
$("#content").load("page.html #main");

Load with Data

$("#results").load("search.php", { query: "jQuery" });

Practical: Partial Page Updates

// Load sidebar content
$("#sidebar").load("/partials/sidebar.html");

// Load on click
$(".load-more").click(function() {
    $("#content").load("next-page.html");
    return false;
});

AJAX Loading Indicator

$("#content")
    .html("<p>Loading...</p>")
    .load("page.html", function() {
        console.log("Done");
    });

load() vs $.ajax()

Feature	load()	$.ajax()
Method	GET only	Any
Target	Always inserts HTML	Full control
Complexity	Simple	Advanced

Mini Practice

1. Load HTML into a div
2. Load with a selector filter
3. Show a loading state during load
4. Load content on button click

Up Next

Continue with Get and Post — simplified AJAX requests.