jquery
  1. jquery-load
PreviousNext

jQuery Load

jQuery Load is a powerful method that allows you to load content into a selected element on your webpage without having to refresh the page. It's a simple yet effective way to update your webpage with new content and improve user experience.

Syntax

The basic syntax for jQuery Load is as follows:

$(selector).load(url, [data], [callback]);
  • selector is the element on the webpage where you want to load the data
  • url is the location of the content you want to load
  • [data] (optional) is any data you want to send to the server along with the request
  • [callback] (optional) is a function that is executed when the request is completed

Use

jQuery Load is useful for loading dynamic content, such as new blog posts, comments, or product listings. It allows you to fetch data from a server, and then inject that data into an existing HTML element on the webpage, without having to refresh the entire page.

Example

Here is an example of using jQuery Load to load content into a selected element on the webpage:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery .load() Example</title>
    <!-- Include jQuery library -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

    <div id="result">Content will be loaded here</div>
    <button id="loadContent">Load Content</button>

    <script>
        // Use $(document).ready() to ensure the DOM is fully loaded before executing the script
        $(document).ready(function() {
            // Attach a click event handler to the button
            $("#loadContent").click(function() {
                // Use .load() to fetch and load content from the server into the #result element
                $("#result").load("example.txt", function(response, status, xhr) {
                    if (status === "error") {
                        // Handle errors
                        console.error("Error loading content:", xhr.status, xhr.statusText);
                    } else {
                        // Callback function after content is successfully loaded
                        console.log("Content loaded successfully");
                    }
                });
            });
        });
    </script>
</body>
</html>
Try Playground

In this example, we use the .load() method to fetch data from new-content.html, and then inject that data into the div element with an ID of content.

Summary

jQuery Load is a useful method for loading new content into an existing element on the webpage without having to refresh the entire page. It's an effective way to improve user experience and create dynamic web applications. Whether you're updating blog posts, comments, or product listings, jQuery Load is a powerful tool to have in your toolkit.

AJAX IntroductionGet/Post
Published on: