jQuery: The Write Less, Do More JavaScript Library

Ajax/load

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Ajax

[edit]

load( url, [data], [callback] )

Load HTML from a remote file and inject it into the DOM.
A GET request will be performed by default - but if you pass in any extra parameters then a POST will occur. In jQuery 1.2 you can now specify a jQuery selector in the URL. Doing so will filter the incoming HTML document, only injecting the elements that match the selector. The syntax looks something like "url #some > selector". See the examples for more information.
Arguments:

urlString
The URL of the HTML page to load.
data (Optional)Map
Key/value pairs that will be sent to the server.
callback (Optional)Callback
The function called when the ajax request is complete (not necessarily success). 
function (responseText, textStatus, XMLHttpRequest) {
  this; // dom element
}

Template:APICallback

Examples:
Load a piece of the documentation sidebar navigation into a custom unordered list.

$("#links").load("/Main_Page #p-Getting-Started li");


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#links").load("/Main_Page #p-Getting-Started li");
  });
  </script>
  <style>body{ font-size: 11px; font-family: Arial; }</style>
</head>
<body>
  <b>jQuery Links:</b>
<ul id="links"></ul>
</body>
</html>

Load the feeds.html file into the div with the ID of feeds.

$("#feeds").load("feeds.html");


<div id="feeds"><b>45</b> feeds found.</div>

Same as above, but will POST the additional parameters to the server and a callback that is executed when the server is finished responding.

 $("#feeds").load("feeds.php", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
 });

NameType

Retrieved from "http://docs.jquery.com/Ajax/load"