uTools-Manuals/docs/jQuery/jQuery.get.html
2019-04-21 11:50:48 +08:00

244 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">jQuery.get()</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/jQuery.get/" target="_blank">jQuery.get()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="jQuery-get1"><h2 class="section-title">
<span class="name">jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )</span><span class="returns">返回: <a href="/Types/#jqXHR">jqXHR</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>使用一个HTTP GET请求从服务器加载数据。</p>
<ul class="signatures"><li class="signature" id="jQuery-get-url-data-successdata--textStatus--jqXHR-dataType">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )</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键值对。</div>
</li>
<li>
<div><strong>success(data, textStatus, jqXHR)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>当请求成功后执行的回调函数。</div>
</li>
<li>
<div><strong>dataType</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>从服务器返回的预期的数据类型。默认智能猜测xml, json, script, 或 html</div>
</li>
</ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p>这是一个Ajax功能的缩写这相当于:</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>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.ajax({</code></div></div><div class="container"><div class="line"><code> url: url,</code></div></div><div class="container"><div class="line"><code> data: data,</code></div></div><div class="container"><div class="line"><code> success: success,</code></div></div><div class="container"><div class="line"><code> dataType: dataType</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p><code>success</code> 回调函数会传入返回的数据是根据MIME类型的响应它可能返回的数据类型包括XML根节点, 字符串, JavaScript 文件, 或者 JSON 对象。 同时还会传入描述响应状态的字符串。</p>
<p><strong>在jQuery 1.5</strong><code>success</code>回调函数还传递一个<a href="/jQuery.get/#jqxhr-object">“jqXHR”对象</a> <strong></strong> jQuery <strong>1.4中</strong> ,它传递的是<code>XMLHttpRequest</code>对象。然而由于JSONP形式和跨域的GET请求不使用<abbr title="XmlHttpRequest">XHR</abbr>,在这些情况下, <code>jqXHR</code><code>textStatus</code>参数传递给success成功回调是 undefined 。</p>
<p>大多数实现将指定一个成功的回调处理程序:</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>
<div class="line n4">4</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.get(<span class="string">'ajax/test.html'</span>, <span class="keyword">function</span>(data) {</code></div></div><div class="container"><div class="line"><code> $(<span class="string">'.result'</span>).html(data);</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>这个例子所请求到的HTML代码片段插在页面中。</p>
<h4 id="jqxhr-object">The jqXHR ObjectjqXHR 对象)</h4>
<p><strong>从jQuery 1.5开始</strong>所有jQuery的Ajax方法都返回一个<code>XMLHTTPRequest</code>对象的超集。这个通过<code>$.get()</code>方法返回的jQuery XHR对象或“jqXHR”实现了 Promise 接口,使它拥有 Promise 的所有属性,方法和行为(见<a href="/category/deferred-object/">Deferred object</a>获取更多信息)。<code>jqXHR.done()</code> (表示成功), <code>jqXHR.fail() (表示错误)</code>, 和 <code>jqXHR.always()</code> (表示完成, 无论是成功或错误) 方法接受一个函数参数,用来请求终止时被调用。关于这个函数接收参数的详细信息,请参阅 <a href="/jQuery.ajax/#jqXHR">jqXHR Object</a> 文档中的 $.ajax() 章节。</p>
<p>Promise 接口也允许jQuery的Ajax方法, 包括 <code>$.get()</code>, 在一个单独的请求中关联到 <code>.done()</code>, <code>.fail()</code>, 和 <code>.always()</code> 回调函数, 甚至允许你在请求已经结束后,指派回调函数。如果该请求已经完成,则回调函数会被立刻调用。</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>
<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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// Assign handlers immediately after making the request,</span></code></div></div><div class="container"><div class="line"><code> <span class="comment">// and remember the jqxhr object for this request</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> jqxhr = $.get(<span class="string">"example.php"</span>, <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> alert(<span class="string">"success"</span>);</code></div></div><div class="container"><div class="line"><code> })</code></div></div><div class="container"><div class="line"><code> .success(<span class="keyword">function</span>() { alert(<span class="string">"second success"</span>); })</code></div></div><div class="container"><div class="line"><code> .error(<span class="keyword">function</span>() { alert(<span class="string">"error"</span>); })</code></div></div><div class="container"><div class="line"><code> .complete(<span class="keyword">function</span>() { alert(<span class="string">"complete"</span>); });</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// perform other work here ...</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// Set another completion function for the request above</span></code></div></div><div class="container"><div class="line"><code> jqxhr.complete(<span class="keyword">function</span>(){ alert(<span class="string">"second complete"</span>); });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Deprecation Notice推荐使用的注意事项</h4>
<p><code>jqXHR.success()</code>, <code>jqXHR.error()</code>, 和 <code>jqXHR.complete()</code> 回调方法 在jQuery 1.5中引进, <strong>在jQuery 1.8中不赞成使用,已经过时</strong>。他们最终将被取消(移除),你的代码应该为次做好准备,使用 <code>jqXHR.done()</code>, <code>jqXHR.fail()</code>, 和 <code>jqXHR.always()</code> 代替.</p>
</div>
<h3>Additional Notes:(其他注意事项:)</h3>
<div class="longdesc">
<ul>
<li> 由于浏览器的安全限制大多数“Ajax”的要求均采用<a href="http://en.wikipedia.org/wiki/Same_origin_policy" title="维基百科上的同源策略">同一起源的政策</a> ;即无法从不同的域,子域或协议中正确接收数据。</li>
<li>如果一个jQuery.get请求返回一个错误代码它会静静的失败除非脚本调用全局的<a href="/ajaxError">.ajaxError</a>方法。在jQuery 1.5 通过jQuery.get()返回的<code>jqXHR</code>对象的<code>.error()</code>方法也可用于错误处理。</li>
<li>Script和JSONP形式请求不受同源策略的限制。</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">请求 test.php 页面, 但是忽略返回结果.</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>$.get(<span class="string">"test.php"</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">请求 test.php 页面 并且发送url参数(虽然仍然忽视返回的结果)。</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>$.get(<span class="string">"test.php"</span>, { name: <span class="string">"John"</span>, time: <span class="string">"2pm"</span> } );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-2">
<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>$.get(<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-3">
<h4>Example: <span class="desc">Alert 从 test.php请求的数据结果 (HTML 或者 XML,取决于返回的结果).</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>$.get(<span class="string">"test.php"</span>, <span class="keyword">function</span>(data){</code></div></div><div class="container"><div class="line"><code>alert(<span class="string">"Data Loaded: "</span> + data);</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-4">
<h4>Example: <span class="desc"> Alert 从 test.cgi请求并且发送url参数的数据结果 (HTML 或者 XML,取决于返回的结果).</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>
<div class="line n4">4</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.get(<span class="string">"test.cgi"</span>, { name: <span class="string">"John"</span>, time: <span class="string">"2pm"</span> },</code></div></div><div class="container"><div class="line"><code> <span class="keyword">function</span>(data){</code></div></div><div class="container"><div class="line"><code> alert(<span class="string">"Data Loaded: "</span> + data);</code></div></div><div class="container"><div class="line"><code> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-5">
<h4>Example: <span class="desc"> 获取test.php的页面已返回的JSON格式的内容 (&lt;?php echo json_encode(array("name"=&gt;"John","time"=&gt;"2pm")); ?&gt;), 并且加到页面中.</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>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.get(<span class="string">"test.php"</span>,</code></div></div><div class="container"><div class="line"><code> <span class="keyword">function</span>(data){</code></div></div><div class="container"><div class="line"><code> $(<span class="string">'body'</span>).append( <span class="string">"Name: "</span> + data.name ) <span class="comment">// John</span></code></div></div><div class="container"><div class="line"><code> .append( <span class="string">"Time: "</span> + data.time ); <span class="comment">// 2pm</span></code></div></div><div class="container"><div class="line"><code> }, <span class="string">"json"</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div></section>
</div></article> </div>
</article>