uTools-Manuals/docs/jQuery/jQuery.getJSON.html

243 lines
18 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.getJSON()</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.getJSON/" target="_blank">jQuery.getJSON()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="jQuery-getJSON1"><h2 class="section-title">
<span class="name">jQuery.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )</span><span class="returns">返回: <a href="/Types/#jqXHR">jqXHR</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>使用一个HTTP GET请求从服务器加载JSON编码的数据。</p>
<ul class="signatures"><li class="signature" id="jQuery-getJSON-url-data-successdata--textStatus--jqXHR">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>jQuery.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )</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">PlainObject</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>
</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> dataType: <span class="string">"json"</span>,</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>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>数据会被附加到一个查询字符串的URL中发送到服务器。如果该值的<code>data</code>参数是一个普通的对象它会转换为一个字符串并使用URL编码然后才追加到URL中。</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>
<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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.getJSON(<span class="string">'ajax/test.json'</span>, <span class="keyword">function</span>(data) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> items = [];</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> $.each(data, <span class="keyword">function</span>(key, val) {</code></div></div><div class="container"><div class="line"><code> items.push(<span class="string">'&lt;li id="'</span> + key + <span class="string">'"&gt;'</span> + val + <span class="string">'&lt;/li&gt;'</span>);</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="string">'&lt;ul/&gt;'</span>, {</code></div></div><div class="container"><div class="line"><code> <span class="string">'class'</span>: <span class="string">'my-new-list'</span>,</code></div></div><div class="container"><div class="line"><code> html: items.join(<span class="string">''</span>)</code></div></div><div class="container"><div class="line"><code> }).appendTo(<span class="string">'body'</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>这个例子当然遵循JSON文件的结构</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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>{</code></div></div><div class="container"><div class="line"><code> <span class="string">"one"</span>: <span class="string">"Singular sensation"</span>,</code></div></div><div class="container"><div class="line"><code> <span class="string">"two"</span>: <span class="string">"Beady little eyes"</span>,</code></div></div><div class="container"><div class="line"><code> <span class="string">"three"</span>: <span class="string">"Little birds pitch by my doorstep"</span></code></div></div><div class="container"><div class="line"><code>}</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>使用这种结构这个例子遍历请求的数据建立了一个无序列表并追加到body。</p>
<p><code>success</code>回调中传入返回的数据通常是一个JavaScript对象或数组所定义的JSON结构使用<a href="/jQuery.parseJSON"><code>$.parseJSON()</code></a>方法解析。它(<code>success</code>回调)也传入了响应状态文本。</p>
<p><strong>在jQuery 1.5</strong>,在<code>success</code>回调函数接收一个<a href="/jQuery.get/#jqxhr-object">“jqXHR”对象</a> <strong>jQuery 1.4</strong>中 ,它收到的是<code>XMLHttpRequest</code>对象。然而由于JSONP形式和跨域的GET请求不使用<abbr title="XmlHttpRequest">XHR</abbr>,在这些情况下, <code>jqXHR</code><code>textStatus</code>参数传递给success成功回调是 undefined 。</p>
<blockquote>
<p><strong>重要提示:</strong> 从jQuery 1.4开始如果JSON文件包含一个语法错误该请求通常会静静的失败。因此应该避免频繁手工编辑JSON数据。JSON语法规则比JavaScript对象字面量表示法更加严格。例如所有在JSON中的字符串无论是属性或值必须用双引号括起来更多JSON细节信息请参阅<a href="http://json.org/">http://json.org/</a></p>
</blockquote>
<h4 id="jsonp">JSONP</h4>
<p>如果URL包含字符串“callback=?”(或类似的参数,取决于服务器端 API 是如何定义的这个请求被视为JSONP形式请求。更多<code>jsonp</code>数据类型的细节讨论,请参阅<a href="/jQuery.ajax/"><code>$.ajax()</code></a></p>
<h4 id="jqxhr-object">The jqXHR ObjectjqXHR 对象)</h4>
<p>估计是jQuery官方没有及时的更新这条api<a href="/jQuery.get/#jqxhr-object">jQuery.get() api中的jqXHR 对象</a>描述上有差别。</p>
<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>$.ajax()</code>里使用jQuery XHR 对象<a href="/jQuery.ajax"><code>$.ajax()</code></a>同样也提供了<code>.error()</code> <code>.success()</code><code>.complete()</code>方法。这些方法接受一个函数参数,用来请求终止时被调用。这个函数接收与<code>$.ajax()</code>回调函数名中相同的参数。</p>
<p>Promise 接口也允许jQuery的Ajax方法, 包括 <code>$.getJSON()</code>, 在一个单独的请求中关联到 <code>.success()</code>, <code>.complete()</code>, 和 <code>.error()</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 = $.getJSON(<span class="string">"example.json"</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>jQuery 1.5中引进的
<code>jqXHR.success()</code>,<code>jqXHR.error()</code>,<code>jqXHR.complete()</code>回调方法在<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>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">从 Flickr JSONP API中加载最近的四张标签为猫的图片</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 class="tag">img</span><span class="rules">{ <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">100</span>px;</span></span> <span class="rule"><span class="attribute">float</span>:<span class="value"> left;</span></span> <span class="rule">}</span></span></span><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> <span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"images"</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">div</span>&gt;</span></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>$.getJSON(<span class="string">"http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"</span>,</code></div></div><div class="container"><div class="line"><code> {</code></div></div><div class="container"><div class="line"><code> tags: <span class="string">"mount rainier"</span>,</code></div></div><div class="container"><div class="line"><code> tagmode: <span class="string">"any"</span>,</code></div></div><div class="container"><div class="line"><code> format: <span class="string">"json"</span></code></div></div><div class="container"><div class="line"><code> },</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> $.each(data.items, <span class="keyword">function</span>(i,item){</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"&lt;img/&gt;"</span>).attr(<span class="string">"src"</span>, item.media.m).appendTo(<span class="string">"#images"</span>);</code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span> ( i == <span class="number">3</span> ) <span class="keyword">return</span> <span class="literal">false</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></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"> 通过test.js加载这个JSON数据并使用返回的JSON数据中的 name值</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>$.getJSON(<span class="string">"test.js"</span>, <span class="keyword">function</span>(json) {</code></div></div><div class="container"><div class="line"><code> alert(<span class="string">"JSON Data: "</span> + json.users[<span class="number">3</span>].name);</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-2">
<h4>Example: <span class="desc">通过额外的Key/value参数从test.js加载这个JSON数据,并使用返回的JSON数据中的 name值.</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>$.getJSON(<span class="string">"test.js"</span>, { name: <span class="string">"John"</span>, time: <span class="string">"2pm"</span> }, <span class="keyword">function</span>(json) {</code></div></div><div class="container"><div class="line"><code> alert(<span class="string">"JSON Data: "</span> + json.users[<span class="number">3</span>].name);</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>