uTools-Manuals/docs/jQuery/ajaxError.html

127 lines
7.6 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">.ajaxError()</h1>
<div class="entry-meta">
所属分类:<span class="category"><a href="/category/ajax/">Ajax</a> &gt; <a href="/category/ajax/global-ajax-event-handlers/">全局 Ajax 事件处理器</a></span>
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/ajaxError/" target="_blank">.ajaxError()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="ajaxError1"><h2 class="section-title">
<span class="name">.ajaxError( handler(event, jqXHR, ajaxSettings, thrownError) )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>Ajax请求出错时注册一个回调处理函数这是一个 <a href="/Ajax_Events">Ajax Event</a></p>
<ul class="signatures"><li class="signature" id="ajaxError-handlerevent--jqXHR--ajaxSettings--thrownError">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.ajaxError( handler(event, jqXHR, ajaxSettings, thrownError) )</h4>
<ul><li>
<div><strong>handler(event, jqXHR, ajaxSettings, thrownError)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>被调用的函数。</div>
</li></ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p>每当一个Ajax请求出错时jQuery就会触发<code>ajaxError</code>事件,在这个时间点所有处理函数会使用<code>.ajaxError()</code>方法注册并执行。<strong>注意:</strong><em>这里的handler处理器调用跨域的脚本和跨域的JSONP请求。</em></p>
<p>观察这种方法建立一个基本的Ajax加载请求</p>
<div class="syntaxhighlighter xml 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="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"trigger"</span>&gt;</span>Trigger<span class="tag">&lt;/<span class="title">button</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">class</span>=<span class="value">"result"</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">div</span> <span class="attribute">class</span>=<span class="value">"log"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>在document上绑定事件处理器</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>$(document).ajaxError(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $( <span class="string">"div.log"</span> ).text( <span class="string">"Triggered ajaxError handler."</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>现在我们可以使用任何的jQuery方法构建一个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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">"button.trigger"</span> ).click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $( <span class="string">"div.result"</span> ).load( <span class="string">"ajax/missing.html"</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
当用户点击按钮并且Ajax请求失败因为所请求的文件不存在这个信息就会显示。</p>
<p><strong>但是从 jQuery 1.8 开始, <code>.ajaxComplete()</code> 方法只能绑定到 <code>document</code>元素.</strong></p>
<p><strong>注,这段在官网的原文中已经被删除:</strong> 因为<code>.ajaxComplete()</code> 是作为一个jQuery对象实例方法去执行的回调函数中我们可以用<code>this</code>关键字作为指定的元素。</p>
<p>无论哪一个Ajax请求被完成所有<code>ajaxError</code>处理器都将被执行。如果我们必须区分不同的请求,我们可以使参数传递给这个处理器。 他是通过事件对象、 <code>XMLHttpRequest</code> 对象和设置对象中使用的请求,每次<code>ajaxError</code> 处理器执行,它传递事件对象,<code>jqXHR</code>对象(在 jQuery 1.5之前是<code><abbr title="XMLHttpRequest">XHR</abbr></code>对象和用来创建请求的设置settings对象。如果请求失败因为JavaScript抛出一个异常并且作为第四个参数的异常对象被传递给处理函数。举个例子,我们能限制我们的回调到只处理事件处理某一特定的URL:</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>$( document ).ajaxError(<span class="keyword">function</span>(event, jqxhr, settings, exception) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span> ( settings.url == <span class="string">"ajax/missing.html"</span> ) {</code></div></div><div class="container"><div class="line"><code> $( <span class="string">"div.log"</span> ).text( <span class="string">"Triggered ajaxError handler."</span> );</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>其他注意事项:</h3>
<div class="longdesc"><ul>
<li>
如果<code>global</code>选项设置为<code>false</code>,调用<code><a href="/jQuery.Ajax">$.ajax()</a></code><code><a href="/jQuery.ajaxError">$.ajaxError()</a></code>方法将不会被触发。</li>
</ul></div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">当Ajax请求失败后显示一个信息.</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>$(document).ajaxError(<span class="keyword">function</span>(event, request, settings) {</code></div></div><div class="container"><div class="line"><code> $( <span class="string">"#msg"</span> ).append( <span class="string">"&lt;li&gt;Error requesting page "</span> + settings.url + <span class="string">"&lt;/li&gt;"</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>