jQuery AJAX Load

Back to: jQuery Tutorials

jQuery AJAX Load Function with Examples

In this article, I am going to discuss how to load HTML data from the server using the jQuery AJAX load function with Examples. At the end of this article, you will understand everything about the jQuery Load function.

What Is AJAX?

AJAX stands for Asynchronous JavaScript and XML. In short, AJAX is about allowing parts of the page to be updated without having to reload the entire page. 

AJAX with jQuery

jQuery provides several methods for AJAX functionality. With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a server using both HTTP Get and HTTP Post – And you can load the external data directly into the selected HTML elements of your web page!

jQuery load() function for AJAX

The jQuery load() method allows HTML or text content to be loaded from a server and added into a DOM element.

Syntax: $.load(url,[data],[callback]);

Parameters:
  1. url: request URL from which you want to retrieve the content
  2. data: JSON data to be sent with the request to the server.
  3. callback: function to be executed when the request succeeds
jQuery AJAX Load Example

The following example loads HTML data from the server. When a text box receives focus, the help text associated with that field is loaded from the server and displayed. When the focus is lost the help text disappears.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Login Page</title>
</head>
<body>
    <section>
        <div class="contentBox">
            <div class="formBox">
                <h2 class="login">Registration</h2>
                <form>
                    <div class="inputBox">
                        <input type="text" name="firstName" id="firstName" placeholder="Enter Your First Name"
                            size="30">
                        <div id="firstNameHelpDiv"></div>
                    </div>
                    <div class="inputBox">
                        <input type="text" name="lastName" id="lastName" placeholder="Enter Your Last Name" size="30">
                        <div id="lastNameHelpDiv"></div>
                    </div>

                    <div class="inputBox">
                        <input type="email" name="email" id="email" placeholder="Enter Your Email ID">
                        <div id="emailHelpDiv"></div>
                    </div>
                    <div class="inputBox">
                        <input type="phone" name="phone" id="phone" placeholder="Enter Your Mobile Number">
                        <div id="phoneHelpDiv"></div>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var textBoxes = $('input');
            textBoxes.focus(function () {
                var helpDiv = $(this).attr('id') + 'HelpDiv';
                $('#' + helpDiv).load('help.html #' + helpDiv);
            });

            textBoxes.blur(function () {
                var helpDiv = $(this).attr('id') + 'HelpDiv';
                $('#' + helpDiv).html('');
            });
        });
    </script>
</body>
</html>
help.html
<div id="firstNameHelpDiv">
        Your fisrt name as it appears in passport
</div>

<div id="lastNameHelpDiv">
        Your last name as it appears in passport
</div>

<div id="emailHelpDiv">
        Your email address for communication
</div>

<div id="phoneHelpDiv">
        Your Working Mobile Number
</div>
style.css
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
.contentBox {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  background: linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
}
.formBox {
  margin: auto;
  background-color: #bec2bf;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 600px;
  height: 500px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.login {
  color: black;
  font-size: 1.5em;
  text-align: center;
  margin-top: 20px auto;
  padding-top: 20px;
}
.inputBox {
  width: 100%;
  margin: 20px auto;
}
.inputBox input {
  width: 100%;
  height: 70px;
  margin: auto;
  padding: 10px 25px;
  font-size: 20px;
  border-radius: 20px;
  border: none;
  outline: none;
}

form {
  width: 90%;
}

In this example, we are retrieving the id of the associated input boxes which are being focused, and then we are loading the help text from the associated id of the page help.html. Then we are printing the help text below the input field.

how to load HTML data from the server using the jQuery AJAX load function with Examples

The optional callback parameter specifies a callback function to run when the load() method is completed. The callback function can have different parameters:

  1. responseTxt– contains the resulting content if the call succeeds
  2. statusTxt – contains the status of the call
  3. xhr – contains the XMLHttpRequest object

You can check them in the console in the following way

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var textBoxes = $('input');
        textBoxes.focus(function () {
            var helpDiv = $(this).attr('id') + 'HelpDiv';
            $('#' + helpDiv).load('help.html #' + helpDiv, function (responseTxt, statusTxt, xhr) {
                console.log(`Response from the Server : ${responseTxt}`)
                console.log(`Response Status : ${statusTxt}`)
                console.log(xhr)

            });
        });

        textBoxes.blur(function () {
            var helpDiv = $(this).attr('id') + 'HelpDiv';
            $('#' + helpDiv).html('');
        });
    });
</script>

With the above changes in place, refresh the application and open the browser developer tool and select the Console tab and select any text box and you will get the following out.

jQuery AJAX Load Function with Examples

Here, in this article, I try to explain how to load HTML data from the server using the jQuery AJAX load function with Examples and I hope you enjoy this article.

Leave a Reply

Your email address will not be published. Required fields are marked *