Skip to content

Note

不挑戰記憶力的技術筆記

Menu
Menu

Ajax loading

Posted on 2012 年 2 月 22 日 by febr

有的時候query等資料回傳要花點時間(極限3秒以內),為了在這幾秒不讓user以為程式當掉,

因此在程式加上loading的訊息讓user知道必須稍後。

complete:請求完成時執行的函式(不論結果是success或error)。
beforeSend:發送請求之前會執行的函式。

一開始將#loadingIMG  display:none,

submit後,會先跑beforeSend的function,

執行完成後,無論success或error都會執行complete。

Example:

Ajax:

$.ajax({

……
beforeSend:function() {
$(‘#loadingIMG’).show();
},
complete:function() {
$(‘#loadingIMG’).hide();

},

……

});

HTML:

……

<div id=”loadingIMG” style=”display:none”>
<img src=”../images/loading1.gif”/>
<p>資料處理中,請稍後。</p>
</div>

……

 

參考資料: http://expect7.pixnet.net/blog/post/39829979-%5B%E7%A8%8B%E5%BC%8F%5D%5Bjquery%5D-%E8%AE%93ajax%E9%81%8B%E4%BD%9C%E7%9A%84%E6%99%82%E5%80%99%EF%BC%8C%E8%B7%B3%E5%87%BAloding%E7%9A%84%E8%A8%8A

發佈留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

近期文章

  • [AWS] S3 Object Initiate restore (復原回 Standard)
  • [Windows] 使用者快速登出的方法 Logout/ Logoff/Sign Out from Windows User Account
  • [Windows] Windows 11 安裝Server管理工具Install RSAT(Remote Server Administrator Tools)
  • Chrome出現:你的連線不是私人連線 Your connection is not private
  • [C#] 取得 Request URL 的方法

近期留言

    彙整

    分類

    • Ajax
    • Android
    • ASP
    • ASP.NET MVC
    • Azure
    • C#
    • Cisco
    • CSS
    • Delphi
    • Developer Tools
    • Framework
    • FreeBSD
    • Git
    • HTML5
    • javascript
    • jQuery
    • Juniper
    • Linux
    • Mac
    • PHP
    • Python
    • Server&OS
    • Software
    • SQL server
    • Sublime Text
    • Ubuntu
    • Visual Studio
    • Vmware
    • Web Design
    • Web Development
    • Windows
    • WordPress
    • 未分類
    • 未分類

    彙整

    分類

    • Ajax
    • Android
    • ASP
    • ASP.NET MVC
    • Azure
    • C#
    • Cisco
    • CSS
    • Delphi
    • Developer Tools
    • Framework
    • FreeBSD
    • Git
    • HTML5
    • javascript
    • jQuery
    • Juniper
    • Linux
    • Mac
    • PHP
    • Python
    • Server&OS
    • Software
    • SQL server
    • Sublime Text
    • Ubuntu
    • Visual Studio
    • Vmware
    • Web Design
    • Web Development
    • Windows
    • WordPress
    • 未分類
    • 未分類

    其他操作

    • 登入
    • 訂閱網站內容的資訊提供
    • 訂閱留言的資訊提供
    • WordPress.org 台灣繁體中文
    © 2025 Note | Powered by Superbs Personal Blog theme