无涯教程-jQuery - ajaxSuccess( callback )方法函数

无涯教程
81 阅读1分钟

ajaxSuccess(回调)方法附加一个函数，只要AJAX请求成功完成，该函数便会执行。这是一个Ajax事件。

ajaxSuccess( callback ) - 语法

$(document).ajaxSuccess( callback )

这是此方法使用的所有参数的描述-

  • callback    -  要执行的功能。事件对象，XMLHttpRequest和用于该请求的设置将作为参数传递给回调。

ajaxSuccess( callback ) - 示例

假设无涯教程在result.html文件中包含以下HTML内容-

<h1>THIS IS RESULT...</h1>

以下是一个简单的示例，简单说明了此方法的用法。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">language</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"javascript"</span><span class="tag">&gt;</span><span class="pln">
     $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
		
        </span><span class="com">/* Global variable */</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> count </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">

        $</span><span class="pun">(</span><span class="str">"#driver"</span><span class="pun">).</span><span class="pln">click</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">event</span><span class="pun">){</span><span class="pln">
           $</span><span class="pun">(</span><span class="str">#stage0</span><span class="pun">).</span><span class="pln">load</span><span class="pun">(</span><span class="str">result.html</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">});</span><span class="pln">
			
        </span><span class="com">/* Gets called when request starts */</span><span class="pln">
        $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ajaxStart</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">
           count</span><span class="pun">++;</span><span class="pln">
           $</span><span class="pun">(</span><span class="str">"#stage1"</span><span class="pun">).</span><span class="pln">html</span><span class="pun">(</span><span class="str">"&lt;h1&gt;Starts, Count :"</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> count </span><span class="pun">+</span><span class="pln"> </span><span class="str">"&lt;/h1&gt;"</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">});</span><span class="pln">
			
        </span><span class="com">/* Gets called when request is sent */</span><span class="pln">
        $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ajaxSend</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">evt</span><span class="pun">,</span><span class="pln"> req</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">set</span><span class="pun">){</span><span class="pln">
           count</span><span class="pun">++;</span><span class="pln">
           $</span><span class="pun">(</span><span class="str">"#stage2"</span><span class="pun">).</span><span class="pln">html</span><span class="pun">(</span><span class="str">"&lt;h1&gt;Sends, Count :"</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> count </span><span class="pun">+</span><span class="pln"> </span><span class="str">"&lt;/h1&gt;"</span><span class="pun">);</span><span class="pln">
           $</span><span class="pun">(</span><span class="str">"#stage2"</span><span class="pun">).</span><span class="pln">append</span><span class="pun">(</span><span class="str">"&lt;h1&gt;URL :"</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="kwd">set</span><span class="pun">.</span><span class="pln">url  </span><span class="pun">+</span><span class="pln"> </span><span class="str">"&lt;/h1&gt;"</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">});</span><span class="pln">
			
        </span><span class="com">/* Gets called when request completes */</span><span class="pln">
        $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ajaxComplete</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">event</span><span class="pun">,</span><span class="pln">request</span><span class="pun">,</span><span class="pln">settings</span><span class="pun">){</span><span class="pln">
           count</span><span class="pun">++;</span><span class="pln">
           $</span><span class="pun">(</span><span class="str">"#stage3"</span><span class="pun">).</span><span class="pln">html</span><span class="pun">(</span><span class="str">"&lt;h1&gt;Completes,Count:"</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> count </span><span class="pun">+</span><span class="pln"> </span><span class="str">"&lt;/h1&gt;"</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">});</span><span class="pln">
			
        </span><span class="com">/* Gets called when request is stopped */</span><span class="pln">
        $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ajaxStop</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">event</span><span class="pun">,</span><span class="pln">request</span><span class="pun">,</span><span class="pln">settings</span><span class="pun">){</span><span class="pln">
           count</span><span class="pun">++;</span><span class="pln">
           $</span><span class="pun">(</span><span class="str">"#stage4"</span><span class="pun">).</span><span class="pln">html</span><span class="pun">(</span><span class="str">"&lt;h1&gt;Stops, Count :"</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> count </span><span class="pun">+</span><span class="pln"> </span><span class="str">"&lt;/h1&gt;"</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">});</span><span class="pln">
			
        </span><span class="com">/* Gets called when all request completes successfully */</span><span class="pln">
        $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ajaxSuccess</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">event</span><span class="pun">,</span><span class="pln">request</span><span class="pun">,</span><span class="pln">settings</span><span class="pun">){</span><span class="pln">
           count</span><span class="pun">++;</span><span class="pln">
           $</span><span class="pun">(</span><span class="str">"#stage5"</span><span class="pun">).</span><span class="pln">html</span><span class="pun">(</span><span class="str">"&lt;h1&gt;Success,Count :"</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> count </span><span class="pun">+</span><span class="pln"> </span><span class="str">"&lt;/h1&gt;"</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">});</span><span class="pln">
			
     </span><span class="pun">});</span><span class="pln">
  </span><span class="tag">&lt;/script&gt;</span><span class="pln">



</head>


<body>
<p>Click on the button to load result.html file:</p>


  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"stage0"</span><span class="pln"> </span><span class="atn">style</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln">blue</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
     STAGE - 0
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
	
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"stage1"</span><span class="pln"> </span><span class="atn">style</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln">blue</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
     STAGE - 1
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
	
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"stage2"</span><span class="pln"> </span><span class="atn">style</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln">blue</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
     STAGE - 2
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
	
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"stage3"</span><span class="pln"> </span><span class="atn">style</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln">blue</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
     STAGE - 3
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
	
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"stage4"</span><span class="pln"> </span><span class="atn">style</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln">blue</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
     STAGE - 4
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
	
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"stage5"</span><span class="pln"> </span><span class="atn">style</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln">blue</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
     STAGE - 5
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
	
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">id</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"driver"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Load Data"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">



</body>
</html>

这将产生以下输出-

参考链接

www.learnfk.com/jquery/ajax…

avatar
文章
阅读
粉丝