The load() Method

The jQuery .load() method allows us to load data from the server and place the returned data (usually an HTML/text) into the selected element.

In ths tutorial, we will learn about this .load() method and load an HTML page into div using jQuery. The syntax for using this method is as follows: 

				
				$(selector).load(url,data,callback)

Here are the parameters of the request:

url
Required. A string url to which the request will be sent.
data
Optional. Data in string/object format to be sent along with the request to the server.
callback
Optional. The function to be executed on completion of the request.
jquery load

Consider an HTML file called transporter.html which consists of the <b> element below 

				
				<b>Beam me up, Scotty</b>

We will load this external HTML into div. Using the .load() method, we will place the contents of transporter.html into the empty <div> element of the page below (highlighted, line number 11). For the purpose of this example, place transporter.html in the same directory where the below HTML file is. 

				
				<!DOCTYPE html>
				<html lang="en">
				<head>
					<title>Title of this Page</title>	
					<script type="text/javascript" 
						src="//code.jquery.com/jquery-latest.min.js">
					</script>
				</head>
				<body>
				    <p>Kirk to Scott: </p> 
				    <div></div> 

				    <script type="text/javascript">
				    	$(document).ready(function(){
							$("div").load("transporter.html");
						});
				    </script>
				</body>
				</html>

The page, when displayed in a browser, looks like

This is how with jQuery we load content from another page into a div element of the current page.

We can also load the contents of a text file (which contains no HTML tags), say, transporter.txt,

					
					Beam me up, Scotty

and place it inside the selected element (<div>), with a very minor change in the script

					
					$("div").load("transporter.txt");

Loading Parts of an HTML Page

Now let us append another <b> element, with an id, inside transporter.html.

					
					<b>Beam me up, Scotty</b> 
					<b id="scott">All she's got isn't good enough! What else ya got?</b>

Instead of loading and placing the whole content of transporter.html into the selected element, we can also select and load only a part of it by passing a jQuery selector along with the url, separated by a space character, as shown here by selecting only the <b> element with id value scott 

					
					$("div").load("transporter.html#scott");

On loading, the resulting page looks like

The Callback Function

Here, we delve a little into the third parameter of the .load() method, the callback function. The callback function has three parameters in the following order:

responseTxt
contains resulting data from the server on request success.
txtStatus
contains the status of the request, like success, notmodified, error, timeout, parsererror.
jqXHR
contains the XMLHttpRequest object.

We illustrate its use with the below example

					
					$(document).ready(function(){
						$("div").load("transporters.html", function(responseTxt, txtStatus, jqXHR){	
							if(txtStatus == "success"){
					            console.log("Success: " + jqXHR.status + ", " + jqXHR.statusText);
					        }
					        if(txtStatus == "error"){
					            console.log("Error: " + jqXHR.status + ", " + jqXHR.statusText);
					        }
						});
					});

If txtStatus returns success, it will print the following message into the console

					
					Success: 200, OK

If the URL is wrong or non-existent, txtStatus will return error, and will log the following message into the console

					
					Error: 404, Not Found