jQuery使用ajaxStart()和ajaxStop()方法

来源:http://www.cnblogs.com/hsd1727728211/archive/2016/05/01/5451068.html
-Advertisement-
Play Games

ajaxStart()和ajaxStop()方法是綁定Ajax事件。ajaxStart()方法用於在Ajax請求發出前觸發函數,ajaxStop()方法用於在Ajax請求完成後觸發函數。它們的調用格式為: $(selector).ajaxStart(function())和$(selector).a... ...


ajaxStart()ajaxStop()方法是綁定Ajax事件。ajaxStart()方法用於在Ajax請求發出前觸發函數,ajaxStop()方法用於在Ajax請求完成後觸發函數。它們的調用格式為:

$(selector).ajaxStart(function())$(selector).ajaxStop(function())

其中,兩個方法中括弧都是綁定的函數,當發送Ajax請求前執行ajaxStart()方法綁定的函數,請求成功後,執行ajaxStop ()方法綁定的函數。

例如,在調用ajax()方法請求伺服器數據前,使用動畫顯示正在載入中,當請求成功後,該動畫自動隱藏,如下圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,由於使用ajaxStart()ajaxStop()方法綁定了動畫元素,因此,在開始發送Ajax請求時,元素顯示,請求完成時,動畫元素自動隱藏。

註意:該方法在1.8.2下使用是正常的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>使用ajaxStart()和ajaxStop()方法</title>
        <script src="http://libs.baidu.com/jquery/1.8.2/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
   
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">載入一段文字</span>
                <span class="fr">
                    <input id="btnShow" type="button" value="載入" />
                </span>
            </div>
            <ul>
               <li id="divload"></li>
            </ul>
        </div>
       
        <script type="text/javascript">
            $(function () {
                $("#divload").ajaxStart(function(){
                    $(this).html("正在請求數據...");
                });
                $("#divload").ajaxStop(function(){
                    $(this).html("數據請求完成!");
                });
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.ajax({
                        url: "http://www.imooc.com/data/info_f.php",
                        dataType: "json",
                        success: function (data) {
                            $this.attr("disabled", "true");
                        $("ul").append("<li>我的名字叫:" + data.name + "</li>");
                        $("ul").append("<li>男朋友對我說:" + data.say + "</li>");
                        }
                    });
                })
            });
        </script>
    </body>
</html>


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 這兩周正在寫畢業設計,我做的是一個問答網站。先介紹一下這個網站:這是一個關於大學生線上問答的網站,類似知乎和百度知道,不過功能沒有人家多,畢竟這個網站我一個人在做。網站部署在阿裡雲,網站包括API,Web,IOS,三大模塊,現在沒有找到人幫忙寫安卓,唉... 網站API已經寫完了,Web端正在完善開 ...
  • 十進位 八進位 十六進位 二進位 字元 ASCII名稱 0 0 0 0000 0000 ^@ NUL 1 1 1 0000 0001 ^A SOH 2 2 2 0000 0010 ^B STX 3 3 3 0000 0011 ^C ETX 4 4 4 0000 0100 ^D EOT 5 5 5 0... ...
  • 一,介紹 本文討論JAVA多線程中,使用 thread.suspend()方法暫停線程,使用 thread.resume()恢復暫停的線程 的特點。 先介紹二個關於線程的基本知識: ①線程的執行體是run()方法裡面的每一條語句,main線程執行的則是main()方法裡面的語句。 ②Thread.s ...
  • 問題描述: 今天CZY又找到了三個妹子,有著收藏愛好的他想要找三個地方將妹子們藏起來,將一片空地抽象成一個R行C列的表格,CZY要選出3個單元格。但要滿足如下的兩個條件: (1)任意兩個單元格都不在同一行。 (2)任意兩個單元格都不在同一列。 選取格子存在一個花費,而這個花費是三個格子兩兩之間曼哈頓 ...
  • 上一篇博客中使用文件實現了緩存組件,這一篇我們就使用Redis來實現一下,剩下的如何使用memcache、mysql等去實現緩存我就不一一去做了。 首先我們需要安裝一下 redis 和 phpredis 庫,phpredis 項目在github上的地址:https://github.com/phpr ...
  • 垂直拆分 垂直拆分就是要把表按模塊劃分到不同資料庫表中(當然原則還是不破壞第三範式),這種拆分在大型網站的演變過程中是很常見的。當一個網站還在很小的時候,只有小量的人來開發和維護,各模塊和表都在一起,當網站不斷豐富和壯大的時候,也會變成多個子系統來支撐,這時就有按模塊和功能把表劃分出來的需求。其實, ...
  • 編程雖然苦,但有興趣就會有樂趣。把簡單的事情做到極致,回報自然就來了。朝聞道,夕死可矣。——尼古拉斯·小Q 我和很多人交流過一個有趣的現象,那就是剛畢業到30歲這段時間,會覺得時間過得很慢,總覺得自己還很年輕,但是一旦過了30歲,時間就如白駒過隙,一年又一年飛逝而過。 我自己也是,眼瞅著畢業快15年 ...
  • 負載均衡的基本演算法,主要有以下幾種(參考F5產品): 隨機:負載均衡方法隨機的把負載分配到各個可用的伺服器上,通過隨機數生成演算法選取一個伺服器,然後把連接發送給它。雖然許多均衡產品都支持該演算法,但是它的有效性一直受到質疑,除非把伺服器的可運行時間看的很重。 輪詢:輪詢演算法按順序把每個新的連接請求分配 ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...