EDUCBA

Home Software Development Software Development Tutorials jQuery Tutorial jQuery ajax load

jQuery ajax load

Updated April 17, 2023

jQuery ajax load

Introduction to jQuery ajax load

  • The jQuery ajax load is handling data of the other servers or data files.
  • The jQuery ajax load is a procedure to load information to the server and shows data.
  • The Ajax load is a simple method to load data from the HTTP server and return data into the required element.
  • The jQuery Ajax load is a function to working on an HTTP server to access data from other files such as HTML and text.
  • The Ajax load is a method to send a request to the server using HTTP to load the data and shows data into the output screen.
  • The Ajax load is a process to load the data of another file into an HTTP server and displays data into a web application page.
  • The Ajax load is a parameter working with the jQuery selector and connects with an HTTP server.
  • The Ajax load is an easy and essential method to interconnect servers and other data files.

Syntax

  • The Ajax load is a simple method to connect the server, other data files, and web page.
  • The Ajax load syntax is below.
$(" jQuery selector ").load (URL parameter, Data parameter, Callback function);
  • Description of the syntax:
    • The Ajax load syntax is using three terminologies to load, access, and return data.
    • URL parameter: The URL parameter is required to load the data from the server. The URL can send the request to the server.
    • Data parameter: This is an optional parameter. The plain object or string is the data type of the parameter. It helps to send a request with keys and values.
    • Callback function: This is an optional function. This function works after the completion of the request.
  • The basic Ajax load syntax is below.
$("jQuery selector").load ("URL parameter");
  • Description of the syntax:
    • This syntax returns only URL data to the selector.
    • This URL sends a request to the HTTP server.
  • The basic Ajax load with ID syntax is below.
$("jQuery selector").load ("URL #ID");
  • Description of the syntax:
    • This syntax returns only part of the data in using the selector.
    • The “#ID” is selecting the selector and displays only part of the selector’s data.
  • The basic Ajax load syntax is below.
<script>
$(document).ready (function () {
$("selector").load (" URL ");
});
</script>
  • Description of the syntax:
    • The selector is referring to as ID, class, tag, or attributes.
    • The URL is data files such as HTML files, text files, or web links.

How does Ajax load method work in jQuery?

  • The HTML page is created through filename with .html extension.
    • Example: jQueryLoad.html
  • JQuery files placing inside of the jQueryLoad.html file in the body section.
  • To jQuery, Ajax load needs to either download the jQuery library or use the jQuery CDN version link.
    • Download the latest development version or product version of jQuery from jQuery.com.
    • The user can use offline jQuery in the web application through the jQuery library.
    • The jQuery version place inside of the HTML page. The jQuery link is below.
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>
  • The user can use online jQuery in the web application through jQuery CDN version link.
  • The <script> tag is placing inside of the body section on the HTML page.
    • <script> write a Ajax load code here… </script>
<script>
$(document).ready (function () {
$("#click").click (function () {
$("#load").load (" jQuery.html ");
});
});
</script>
  • Write an HTML code in the body section of the web page.
<body>
<div id = "load">
<h3>  jQuery AJAX Load Content </h3>
</div>
<input type = "button" value = "click here to get content" id = "click">
</body>
  • Write data in the jQuery.html.
<h3>  jQuery AJAX Load Content tutorial </h3>
<p id="point"> i am learning the jQuery ajax load method. </p>
  • Combine the working procedure of the jQuery Ajax load method.
<!DOCTYPE html>
<html>
<head>
<title> jQuery Ajax load example </title>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>
<script>
$(document).ready (function () {
$("#click").click (function () {
$("#load").load ("jQuery.html");
});
});
</script>
</head>
<body>
<div id = "load">
<h3> jQuery AJAX Load Content </h3>
</div>
<input type = "button" value = "click here to get content" id = "click">
</body>
</html>

Examples of jQuery ajax load

Different examples are mentioned below:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Example #1

The basic Ajax load example and output.

Code:

<!DOCTYPE html>
<html>
<head>
<title> jQuery Ajax load example </title>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>
<script>
$(document).ready (function () {
$("#click").click (function () {
$("#load").load ("jQuery.html");
});
});
</script>
</head>
<body>
<div id = "load">
<h3> jQuery AJAX Load Content </h3>
</div>
<input type = "button" value = "click here to get content" id = "click">
</body>
</html>

Output:

  • Before clicking the button Output

jQuery ajax load output 1

  • After clicking the button Output

jQuery ajax load output 1.2

Example #2

The basic Ajax load with id example and output.

Code:

<!DOCTYPE html>
<html>
<head>
<title> jQuery Ajax load example </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>
<script>
$(document).ready (function () {
$("#click").click (function () {
$("#load").load ("jQuery.html #point");
});
});
</script>
</head>
<body>
<div id = "load">
<h3> jQuery AJAX Load Content </h3>
</div>
<input type = "button" value = "click here to get content" id = "click">
</body>
</html>

Output:

  • Before clicking the button Output

jQuery ajax load output 2

  • After clicking the button Output

output 2.2

Example #3

The basic Ajax load example and output.

Code:

<!DOCTYPE html>
<html>
<head>
<title> jQuery Ajax load example </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>
<script>
$(document).ready (function () {
$("#click").click (function () {
$("#load").load ("https://www.educba.com");
});
});
</script>
</head>
<body>
<div id = "load">
<h3> jQuery AJAX Load Content </h3>
</div>
<input type = "button" value = "click here to get content" id = "click">
</body>
</html>

Output:

output 3

After clicking the button, you can directly go to the “educba.com” websites. This web links all data load on the server.

Conclusion

  • The jQuery Ajax load method makes server data safe and displays it simply on the web application.
  • It is providing data support to the HTTP server and manages memory size.
  • It is a user-friendly, easy-to-use, and interactive method in jQuery Ajax.

Recommended Articles

This is a guide to jQuery ajax load. Here we discuss How does Ajax load method work in jQuery along with the examples and outputs. You may also have a look at the following articles to learn more –

  1. jQuery scrollLeft
  2. jQuery Array
  3. jQuery prependTo
  4. jQuery ajax timeout
quiz