您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“Ajax請(qǐng)求過(guò)程中怎么顯示進(jìn)度”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
Ajax在Web應(yīng)用中使用得越來(lái)越頻繁。在進(jìn)行Ajax調(diào)用過(guò)程中一般都具有這樣的做法:顯示一個(gè)GIF圖片動(dòng)畫(huà)表明后臺(tái)正在工作,同時(shí)阻止用戶(hù)操作本頁(yè)面(比如Ajax請(qǐng)求通過(guò)某個(gè)按鈕觸發(fā),用戶(hù)不能頻繁點(diǎn)擊該按鈕產(chǎn)生多個(gè)并發(fā)Ajax請(qǐng)求);調(diào)用完成后,圖片消失,當(dāng)前頁(yè)面運(yùn)行重新編輯。
以下圖為例,頁(yè)面中通過(guò)一個(gè)Load鏈接以Ajax請(qǐng)求的方式加載數(shù)據(jù)(左)。當(dāng)用戶(hù)點(diǎn)擊該鏈接之后,Ajax請(qǐng)求開(kāi)始,GIF圖片顯示“Loading“狀態(tài),同時(shí)當(dāng)前頁(yè)面被“罩住”防止用戶(hù)繼續(xù)點(diǎn)擊Load按鈕(中);Ajax請(qǐng)求完成被返回響應(yīng)的結(jié)果,結(jié)果被呈現(xiàn)出來(lái)的同時(shí),GIF圖片和“遮罩”同時(shí)消失(右)。[源代碼從這里下載]
在這里我同樣以ASP.NET MVC應(yīng)用為例,提供一種簡(jiǎn)單的實(shí)現(xiàn)方式。我們GIF圖片和作為遮罩的<div>定義在布局文件中,并為它們定制了相應(yīng)的CSS。其中GIF和遮罩<div>的z-index分別設(shè)置為2000和1000(這個(gè)任意,只要能夠讓遮罩的<div>遮住當(dāng)前頁(yè)面,GIF圖片顯示在最上層即可)。后者通過(guò)設(shè)置position、top、bottom、left和right是它可以遮住整個(gè)頁(yè)面,并且將其背景設(shè)置為黑色。
<!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> <style type="text/css"> .hide{display:none } .progress{z-index: 2000} .mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #000000} </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>
然后我們通過(guò)如下的代碼為jQuery定義了另一個(gè)實(shí)現(xiàn)Ajax調(diào)用的方法ajax2,該方法依然調(diào)用$.ajax(options)實(shí)現(xiàn)Ajax調(diào)用。在ajax2方法中我們將options參數(shù)complete屬性進(jìn)行了“封裝”,讓可以將顯示出來(lái)的GIF圖片和遮罩<div>隱藏起來(lái)。同時(shí)覆蓋了options的async屬性,是之總是以異步方式執(zhí)行,因?yàn)橹挥羞@樣瀏覽器才不能被鎖住,GIF也才能正常顯示。在調(diào)用$.ajax(options)進(jìn)行Ajax請(qǐng)求之前,我們將GIF圖片和遮罩<div>顯示出來(lái),并且將其定位在正中央。遮罩<div>的透明度進(jìn)行了相應(yīng)設(shè)置,所以會(huì)出現(xiàn)上圖(中)的效果。
<!DOCTYPE html> <html> <head> ... <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script> <script type="text/javascript"> $(function () { $.ajax2 = 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": "50%", "left": "50%", "margin-top": function () { return -1 * img.height() / 2; }, "margin-left": function () { return -1 * img.width() / 2; } }); mask.show().css("opacity", "0.1"); $.ajax(options); }; }); </script> </head> ... /html>
那么現(xiàn)在進(jìn)行Ajax調(diào)用的時(shí)候只需要調(diào)用$.ajax2就可以,如下所示的是實(shí)例中“Load”鏈接的click事件的注冊(cè)代碼:
<a href="#" id="load">Load</a> <div id="result"></div> <script type="text/javascript"> $("#load").click(function () { $.ajax2 ({ url: '@Url.Action("GetContacts")', success: function(result) { $("#result").html(result); } }); }); </script>
“Ajax請(qǐng)求過(guò)程中怎么顯示進(jìn)度”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。