Load() Method in jQuery – AJAX |Example

jQuery load() Method :

  • The jQuery load() method is a simple, but powerful AJAX method.
  • The load() method loads data from a server and puts the returned data into the selected element.

Syntax: 

[code lang=”js”]$(<i>selector</i>).load(<i>URL,data,callback</i>);[/code]
  • The required URL parameter specifies the URL you wish to load.
  • The optional data parameter specifies a set of querystring key/value pairs to send along with the request.
  • The optional callback parameter is the name of a function to be executed after the load() method is completed.

Here is the content of our example file: “demo_test.txt”:

[code lang=”js”]<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>[/code]
  • The following example loads the content of the file “demo_test.txt” into a specific <div> element:

Example :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>[/code]

  • It is also possible to add a jQuery selector to the URL parameter.
  • The following example loads the content of the element with id=”p1″, inside the file “demo_test.txt”, into a specific <div> element:

Example :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt #p1");
});
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>[/code]

  • The optional callback parameter specifies a callback function to run when the load() method is completed. The callback function can have different parameters:
  • responseTxt – contains the resulting content if the call succeeds
  • statusTxt – contains the status of the call
  • xhr – contains the XMLHttpRequest object
  • The following example displays an alert box after the load() method completes. If the load() method has succeeded, it displays “External content loaded successfully!”, and if it fails it displays an error message:

Example :

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>[/code]

jQuery AJAX Reference :

For a complete overview of all jQuery AJAX methods, please go to our jQuery AJAX Reference.

Example : 1

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>[/code]

Example :  2

[code lang=”js”]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt #p1");
});
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>[/code]

One thought on “Load() Method in jQuery – AJAX |Example

  1. Pingback: Post() Methods jQuery – AJAX get() and | Examples | Hackers Third Eye

Comments are closed.