jQuery load() example



The jQuery load() method is used to load data from the server and place the returned HTML into the matched elements.

Syntax

$(selector).load( url [, data ] [, complete ] )
  • url - A string containing the URL to which the request is sent.
  • data - A plain object or string that is sent to the server with the request.
  • complete - A callback function that is executed when the request completes.

Example

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $(document).ajaxStart(function() {
                $("#wait").css("display", "block");
            });
            $(document).ajaxComplete(function() {
                $("#wait").css("display", "none");
                $(".log").text("Triggered ajaxComplete handler.");
            });
            $("button").click(function() {
                $("#txt").load("https://www.w3schools.com/jquery/demo_ajax_load.asp");
            });
        });
    </script>
</head>

<body>

    <div id="txt">
        <h2>Let AJAX change this text</h2>
    </div>

    <button>Change Content</button>

    <div id="wait"></div>

    <div class="log"></div>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

Comments