首頁 > web前端 > js教程 > Ajax實作載入進度條的步奏詳解

Ajax實作載入進度條的步奏詳解

php中世界最好的语言
發布: 2018-04-02 17:32:21
原創
1465 人瀏覽過

這次帶給大家Ajax實作載入進度條的步奏詳解,Ajax實作載入進度條的注意事項有哪些,以下就是實戰案例,一起來看一下。

ajax beforeSend:

#先說這個beforeSend, 在請求發送前執行例如可以判斷用戶有沒有登錄,如果沒有登入就停止請求並提示。

  $.ajax({
    url : 'my_action',
    dataType: 'script',
    beforeSend : function(xhr, opts){
      if(1 == 1) //just an example
      {
        xhr.abort(); // 停止请求
      }
    },
    complete: function(){
      console.log('DONE');
    }
  });
登入後複製

$.ajax有一個參數是complete:function(){} 是在請求完成之後執行的,配合beforeSend可以用來展示進度條

例如:

   $.ajax({
        url : 'my_action',
        dataType: 'script',
        beforeSend : function(){
          // 设置 进度条到20%慢慢变到50%
        },
        complete: function(){
          // 设置 进度条到80%
        }
        success:function(){
          // 渲染页面
          // 进度到100%
        }
      });
登入後複製

這個只是表面上的看到的進度條,顯示大概的進度,並不是真正的加載進度。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

Ajax怎麼操作post請求跳轉頁面

#Ajax進行檔案與參數上傳步奏詳解

#

以上是Ajax實作載入進度條的步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板