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:

<div class="w3-code w3-border notranslate">
<pre>$(<i>selector</i>).load(<i>URL,data,callback</i>);</pre>
</div>

• 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”:

<div class="w3-code w3-border notranslate">
<pre> &lt;h1&gt;Hellow World!!!&lt;/h1&gt;</pre>
</div>

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”:

<div class="w3-code w3-border notranslate">
<pre> &lt;h1&gt;Hellow World!!!&lt;/h1&gt;</pre>
</div>

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:

<div class="w3-example">For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :</div>

<div class="w3-example"></div>

<div class="w3-example"></div>

<div class="w3-example">Email – [email protected]<br>
Mobile No. – 09305235027 – tnt</div>

<div class="w3-example"></div>

<div class="w3-example"></div>

<div class="w3-example"></div>

<div class="w3-example"></div>