.load() JQ Home  <<  Ajax  <<  .load()

Load html from the server.

Description

The .load() Ajax method, allows us to load data from the server and populate the matched element from the returned HTML on successful completion.

  • The .load() method is the simplest way to fetch data from the server, in the fact that it is a method rather than a global function, with the benefit of an implicit callback function. When a successful response is detected (i.e. when textStatus is 'success' or 'notmodified'), the .load() method will automatically inject the data returned by the request into the DOM at the matched element. This makes using this method simpler than using the $.get(url, data, success  signature, which is roughly equivalent but where you have to manually insert information into the DOM.
  • The .load() method also allows us to specify a portion of a remote document to be loaded using a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.
  • There is also an events method named .load() and the method that is fired depends on the set of arguments passed.

Syntax

Signature Description
.load( url [, data] [, function( responseText, textStatus, XMLHttpRequest)] )Load data from the server and populate the matched element from the returned HTML on successful completion.

Parameters

Parameter Description Type
url A string containing the URL to send the request to.String
data An object or string sent to the server with the request.
  • The 'POST' method is used if data is provided as an object, otherwise, 'GET' is used.
 String or
PlainObject
function( responseText, textStatus, XMLHttpRequest) A callback function executed when the request completes.
  • When provided this function is executed after post-processing and HTML insertion have been performed and is fired once for each element in the jQuery collection.
  • The this special operator is set to each DOM element in turn.
Function

Return

A jQuery object.

.load( url [, data] [, function( responseText, textStatus, XMLHttpRequest)] ) ExamplesAjax  <<  Top

Load data from the server and populate the matched element from the returned HTML on successful completion.

This is a shorthand Ajax function, which is equivalent using the jQuery.ajax() method as follows:



$.ajax({
  url: url,
  dataType: 'html',
  data: data,
  success: callback
});

In the example below when we press the button the first time we use the .load() method in its simplest form just using a url and load some HTML from another server page onto this page. The data is loaded to the element with an id of '#sayings', the select input field below is populated.



$(function(){
  $('#btn3').one('click', function(){
    $('#sayings').load( "../../pages/testfile.html" );
  });
});
/*
 * The code for the external HTML file called from $.load() (url: "../../pages/testfile.html)
 * is shown below.
 */
<option value="">— choose a saying —</option>
<option value="1">A stitch in time</option>
<option value="2">The quick brown fox</option>
<option value="3">10 green bottles</option>
<option value="4">Blood is thicker than water</option>
<option value="5">A stitch in time saves nine</option>
<option value="6">A bird in the hand</option>
<option value="7">Prevention is better than cure</option>
<option value="8">To be or not to be</option>
Old Sayings

Saying list to load up:

 

Press the button below to action the above code:

In the example below when we press the button the first time we use the .load() method using a url and segment and load some HTML from another server page onto this page. We load a list into the division element with an id of 'div2'.



$(function(){
  $('#btn4').one('click', function(){
    $('#div2').load( "../traversal/closest.html #list1" );
  });
});

div2. Some initial text.

Press the button below to action the above code:

Related Tutorials

jQuery Advanced Tutorials - Lesson 9 - Ajax Shorthand Methods