ドキュメント

Ajax/load

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Ajax

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 in the form of an Object/Map (key/value pairs) then a POST will occur. Extra parameters passed as a string will still use a GET request.

Note: Keep in mind that Internet Explorer caches the loaded file, so you should pass some extra random GET parameter to prevent caching if you plan to call this function more than once

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". Default selector "body>*" always applies. If the URL contains a space it should be escape()d. See the examples for more information.

Arguments:

urlString
The URL of the HTML page to load.
data (Optional)Map,String
Key/value pairs that will be sent to the server. As of jQuery 1.3 a data string can be passed in instead. When using a string, the request is made as a GET. When using an object/map (key/value pairs), the request is made as a POST.
callback (Optional)Callback
The function called when the ajax request is complete (not necessarily success).
function (responseText, textStatus, XMLHttpRequest) {
  this; // dom element
}
Examples:

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

$("#links").load("/Main_Page #jq-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="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#links").load("/Main_Page #jq-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>

pass arrays of data to the server.

$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );

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