您好,登錄后才能下訂單哦!
這篇文章主要講解了“Ajax怎么在請求過程中顯示進(jìn)度”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“Ajax怎么在請求過程中顯示進(jìn)度”吧!
Ajax在Web應(yīng)用中使用得越來越頻繁。在進(jìn)行Ajax調(diào)用過程中一般都具有這樣的做法:顯示一個GIF圖片動畫表明后臺正在工作,同時阻止用戶操作本頁面(比如Ajax請求通過某個按鈕觸發(fā),用戶不能頻繁點擊該按鈕產(chǎn)生多個并發(fā)Ajax請求);調(diào)用完成后,圖片消失,當(dāng)前頁面運行重新編輯。以下圖為例,頁面中通過一個Load鏈接以Ajax請求的方式加載數(shù)據(jù)(左)。當(dāng)用戶點擊該鏈接之后,Ajax請求開始,GIF圖片顯示“Loading“狀態(tài),同時當(dāng)前頁面被“罩住”防止用戶繼續(xù)點擊Load按鈕(中);Ajax請求完成被返回響應(yīng)的結(jié)果,結(jié)果被呈現(xiàn)出來的同時,GIF圖片和“遮罩”同時消失(右)。
源碼下載
在這里我同樣以ASP.NET MVC應(yīng)用為例,提供一種簡單的實現(xiàn)方式。我們GIF圖片和作為遮罩的<div>定義在布局文件中,并為它們定制了相應(yīng)的CSS。其中GIF和遮罩<div>的z-index分別設(shè)置為2000和1000(這個任意,只要能夠讓遮罩的<div>遮住當(dāng)前頁面,GIF圖片顯示在最上層即可)。后者通過設(shè)置position、top、bottom、left和right是它可以遮住整個頁面,并且將其背景設(shè)置為黑色。
<!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> <style type="text/css"> .hide{displaynone } .progress{z-index } .mask{position fixed;top ;right ;bottom ;left ; z-index ; background-color #} </style> ... </head> <body> <div>@RenderBody()</div> <img id="progressImgage" class="progress hide" alt="" src="@Url.Content("~/Images/ajax-loader.gif")"/> <div id="maskOfProgressImage" class="mask hide"></div> </body> </html>
然后我們通過如下的代碼為jQuery定義了另一個實現(xiàn)Ajax調(diào)用的方法ajax2,該方法依然調(diào)用$.ajax(options)實現(xiàn)Ajax調(diào)用。在ajax2方法中我們將options參數(shù)complete屬性進(jìn)行了“封裝”,讓可以將顯示出來的GIF圖片和遮罩<div>隱藏起來。同時覆蓋了options的async屬性,是之總是以異步方式執(zhí)行,因為只有這樣瀏覽器才不能被鎖住,GIF也才能正常顯示。在調(diào)用$.ajax(options)進(jìn)行Ajax請求之前,我們將GIF圖片和遮罩<div>顯示出來,并且將其定位在正中央。遮罩<div>的透明度進(jìn)行了相應(yīng)設(shè)置,所以會出現(xiàn)上圖(中)的效果。
<!DOCTYPE html> <html> <head> ... <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-...min.js")"></script> <script type="text/javascript"> $(function () { $.ajax = function (options) { var img = $("#progressImgage"); var mask = $("#maskOfProgressImage"); var complete = options.complete; options.complete = function (httpRequest, status) { img.hide(); mask.hide(); if (complete) { complete(httpRequest, status); } }; options.async = true; img.show().css({ "position" "fixed", "top" "%", "left" "%", "margin-top" function () { return - * img.height() / ; }, "margin-left" function () { return - * img.width() / ; } }); mask.show().css("opacity", "."); $.ajax(options); }; }); </script> </head> ... </html>
那么現(xiàn)在進(jìn)行Ajax調(diào)用的時候只需要調(diào)用$.ajax2就可以,如下所示的是實例中“Load”鏈接的click事件的注冊代碼:
<a href="#" id="load">Load</a> <div id="result"></div> <script type="text/javascript"> $("#load").click(function () { $.ajax ({ url '@Url.Action("GetContacts")', success function(result) { $("#result").html(result); } }); }); </script>
感謝各位的閱讀,以上就是“Ajax怎么在請求過程中顯示進(jìn)度”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對Ajax怎么在請求過程中顯示進(jìn)度這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。