jQuery Load() Method

This tutorial is all about jQuery Load() Method.

This tutorial will show you how to use Load() method in jQuery. The load() method  has the ability to load data from the other page and place it into the selected elements. This method is a bit the same with ajax.

 Basic Syntax:

$(selector).load(URL,data,callback);

• url – specifies the file(url) you want to load.
• data – specifies the data you want to send to the server.
• callback – it execute a function after the load() method is completed.

Basic Example:

<h3>Click Me</h3>
 <div id="content"></div> 

<script type="text/javascript" src="places/jquery/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("h3").click(function(){
  $("#content").load("viewme.html")
 });
});
</script>

Here is the content of the second file: “viewme.html”:

 <h1>Hellow World!!!</h1>

Description: If you click all <h3> elements on the page, the load method will be executed. The data in the server (viewme.html) will be displayed in the selected element.

Call Back Example:

<h3>Click Me</h3>
<div id="content"></div> 

<script type="text/javascript" src="places/jquery/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("h3").click(function(){
   $("#content").load("viewme.html",function(){
       alert("The data has been loaded.")
    })
   });
});
</script>

Here is the content of the second file: “viewme.html”:

 <h1>Hellow World!!!</h1>

Description: If you click all <h3> elements on the page, the load method will be executed. The data in the server (viewme.html) will be displayed in the selected element and it will alert at the same time.

output: