uTools-Manuals/docs/jQuery/load.html

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.load()</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/ajax/">Ajax</a> &gt; <a href="/category/ajax/shorthand-methods/">快捷方法</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/load/" target="_blank">.load()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="load1"><h2 class="section-title">
<span class="name">.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素 中。</p>
<ul class="signatures"><li class="signature" id="load-url-data-completeresponseText--textStatus--XMLHttpRequest">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )</h4>
<ul>
<li>
<div><strong>url</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>一个包含发送请求的URL字符串</div>
</li>
<li>
<div><strong>data</strong></div>
<div>类型: <a href="/Types/#PlainObject,%20String">PlainObject, String</a>
</div>
<div>向服务器发送请求的Key/value参数，例如{name:"",age:23}</div>
</li>
<li>
<div><strong>complete(responseText, textStatus, XMLHttpRequest)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>当请求成功后执行的回调函数。</div>
</li>
</ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<blockquote>
<p>注意: 事件处理函数中也有一个方法叫 <code><a href="/load-event">.load()</a></code>。  jQuery根据传递给它的参数设置来确定使用哪个方法执行。</p>
</blockquote>
<p>这个方法是从服务器获取数据最简单的方法。除了不是全局函数，这个方法和<code>$.get(url, data, success)</code> 基本相同，它有一个隐含的回调函数。 当他检查到一个成功的请求(i.e. 当 <code>textStatus</code>是 "success" 或者 "notmodified")时，<code>.load()</code> 方法将返回的HTML 内容数据设置到相匹配的节点中。这就意味着大多数采用这个方法可以很简单:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#result'</span>).load(<span class="string">'ajax/test.html'</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
			      如果选择器没有匹配的元素——在这种情况下，如果document不包含id = "result" 的元素- 这个Ajax请求将<em>不会</em>被发送出去。</p>
<p>如果提供回调,都将在执行后进行后处理:</p>
<h4 id="callback-function">Callback Function</h4>
<p>
			      如果提供了 "complete" 回调函数，它将在函数处理完之后，并且 HTML 已经被插入完时被调用。回调函数会在每个匹配的元素上被调用一次，并且 <code>this</code>始终指向当前正在处理的 DOM 元素。
			    </p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#result'</span>).load(<span class="string">'ajax/test.html'</span>, <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>  alert(<span class="string">'Load was performed.'</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>在上文的两个例子中, 如果当前的文件不包含ID为“result”的元素，那么<code>.load()</code>方法将不被执行。</p>
<h4 id="request-method">Request Method（请求方法）</h4>
<p>默认使用 GET 方式 ， 如果data参数提供一个对象，那么使用 POST 方式。</p>
<h4 id="loading-page-fragments">Loading Page Fragments（加载页面片段）</h4>
<p><code>.load()</code> 方法, 不像 <code><a href="/jQuery.get">$.get()</a></code>那样，允许我们使用在 <code>url</code> 中添加特定参数的特殊语法，来实现可以指定要插入哪一部分远程文档。如果 <code>url</code> 参数的字符串中包含一个或多个空格，那么第一个空格后面的内容，会被当成是 jQuery 的选择器，从而决定应该加载返回结果中的哪部分内容。（译者注：第一个空格后面是一个jQuery选择器，返回的内容中匹配改选择器的内容将被载人到页面中。）</p>
<p>我们可以修改上述例子中,只有#container的一部分被载人到文件中：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#result'</span>).load(<span class="string">'ajax/test.html #container'</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>当这种方法执行, 它将检索 <code>ajax/test.html</code> 返回的页面内容，jQuery会获取ID为 <code>container</code> 元素的内容，并且插入到ID为 <code>result</code> 元素，而其他未被检索到的元素将被废弃。</p>
<p>jQuery使用浏览器的<code>.innerHTML</code>属性去解析检索到的文档，并将其插入到当前文档中。在此过程中，浏览器通常会过滤文档中的一些元素 ，比如<code>&lt;html&gt;</code>, <code>&lt;title&gt;</code>, 或者 <code>&lt;head&gt;</code> 元素。其结果是，由<code>.load()</code>方法返回的元素与从浏览器中直接获取到的文档内容，可能是并不完全一样的。
			    </p>
<h4 id="script-execution">Script Execution（脚本执行）</h4>
<p>当使用URL参数中没有后面跟选择器表达式时，
			      那么传递给 <code>.html()</code> 的返回内容中，是含有脚本的。在它们被丢弃之前，脚本是会被执行的。但如果调用 <code>.load()</code>时，即使在 url 参数中添加了选择器表达式，但在 DOM 被更新之前，脚本会被删除。因此脚本<em>不</em>会被执行。下面的例子分别演示了这两种情况：</p>
<p>任何加载到 <code>#a</code> 中的 JavaScript 脚本，将会作为文档的一部分而被执行。</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#a'</span>).load(<span class="string">'article.html'</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
			      然而，在以下情况下，脚本块将从被加载到<code>#b</code>的document中被剥离出来，而不执行：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#b'</span>).load(<span class="string">'article.html #target'</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>Additional Notes:（其他注意事项：）</h3>
<div class="longdesc">
<ul>
<li> 由于浏览器的安全限制，大多数“Ajax”的要求，均采用<a href="http://en.wikipedia.org/wiki/Same_origin_policy" title="维基百科上的同源策略">同源的政策</a> ;该请求不能成功地检索来自不同的域，子域或协议的数据。</li>
</ul>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4>Example: <span class="desc">在一个有序列表中，加载主页的页脚导航。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">body</span><span class="rules">{ <span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">12</span>px;</span></span> <span class="rule"><span class="attribute">font-family</span>:<span class="value"> Arial;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">b</span>&gt;</span>Footer navigation:<span class="tag">&lt;/<span class="title">b</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">ol</span> <span class="attribute">id</span>=<span class="value">"new-nav"</span>&gt;</span><span class="tag">&lt;/<span class="title">ol</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>  $(<span class="string">"#new-nav"</span>).load(<span class="string">"/ #jq-footerNavigation li"</span>);</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc"> 显示一个信息如果Ajax请求遭遇一个错误</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">body</span><span class="rules">{ <span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">12</span>px;</span></span> <span class="rule"><span class="attribute">font-family</span>:<span class="value"> Arial;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">b</span>&gt;</span>Successful Response (should be blank):<span class="tag">&lt;/<span class="title">b</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"success"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">b</span>&gt;</span>Error Response:<span class="tag">&lt;/<span class="title">b</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"error"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#success"</span>).load(<span class="string">"/not-here.php"</span>, <span class="keyword">function</span>(response, status, xhr) {</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">if</span> (status == <span class="string">"error"</span>) {</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">var</span> msg = <span class="string">"Sorry but there was an error: "</span>;</code></div></div><div class="container"><div class="line"><code>    $(<span class="string">"#error"</span>).html(msg + xhr.status + <span class="string">" "</span> + xhr.statusText);</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-2">
<h4>Example: <span class="desc"> 将feeds.html 文件载人到 ID为feeds的DIV.</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">"#feeds"</span>).load(<span class="string">"feeds.html"</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Result:</h4>
<div class="syntaxhighlighter xml nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"feeds"</span>&gt;</span><span class="tag">&lt;<span class="title">b</span>&gt;</span>45<span class="tag">&lt;/<span class="title">b</span>&gt;</span> feeds found.<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-3">
<h4>Example: <span class="desc">发送数组形式的data参数到服务器。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">"#objectID"</span>).load(<span class="string">"test.php"</span>, { <span class="string">'choices[]'</span>: [<span class="string">"Jon"</span>, <span class="string">"Susan"</span>] } );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-4">
<h4>Example: <span class="desc">Same as above, but will POST the additional parameters to the server and a callback that is executed when the server is finished responding.</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">"#feeds"</span>).load(<span class="string">"feeds.php"</span>, {limit: <span class="number">25</span>}, <span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>alert(<span class="string">"The last 25 entries in the feed have been loaded"</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div></section>
</div></article> </div>
</article>