.load()    ** REMOVED **S2C Home « Ajax « .load()

• <<    jQuery.post()
• Attributes & Properties     >>

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.

This method was deprecated in jQuery 1.8 and removed in 3.0 and is shown for completeness.

Syntax

Parameters

Return

A jQuery object.

.load( url [, data] [, function(responseText, textStatus, XMLHttpRequest)] ) ExamplesTop

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
});

The examples below no longer works from jQuery 3.0 onwards and are just shown as an example for people using earlier versions.

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>

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( "closest.html #list1" );
  });
});

• <<    jQuery.post()
• Attributes & Properties     >>