jQuery load() example

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


$(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.


<!DOCTYPE html>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></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() {


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

    <button>Change Content</button>

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

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


Try it Yourself - Copy paste code in Online HTML Editor to see the result