當ajax工作時顯示加載器

我想在我的AJAX請求正在工作時顯示全屏加載器。我怎樣才能做到這一點？當ajax工作時顯示加載器

$("#send").click(function() { 
    if ($("#ccval").val() == $("#contactcaptcha").text()) { 
     var id = $("#contactcaptcha").attr("data-id"); 
     var cemail = $("#cemail").val(); 

     $.post(base_url + "index.php/myad/getphonenumber", { 
      uniqueid: id, 
      emailaddress: cemail 
     }, function() { 
      alert('email is sent'); 
     }) 
    } else { 
     $("#ccval").val(""); 
     $("#ccval").attr("placeholder", "invalid captcha"); 
    } 
}) 
});

來源

2016-11-11 Shah Rushabh

@RoryMcCrossan感謝編輯這個問題。 –

創建一個元素，將其樣式化爲加載圖標，在帖子前顯示，並在您使用'.always（）;' – DBS

'收到回覆後將其刪除;爲什麼要檢查captcha客戶端？這是不安全的 –

$(function() { 
    $(document).ajaxStart(function() { 
     $("#Loader").show(); 
    }); 

    $(document).ajaxStop(function() { 
     $("#Loader").hide();  
    }); 

    $(document).ajaxError(function() { 
     $("#Loader").hide();  
    }); 
});

其他的答案需要你複製的顯示/隱藏代碼爲每個Ajax調用。如果你只有1個電話，這很好，但我假設你在你的應用程序中有幾個電話。

上面的代碼會在所有ajax請求中顯示你的加載器。我建議將它添加到你的佈局頁面，或者把它放在一個普通的js文件中。

#Loader是由你決定的。在我的網站中，我將它定位爲具有居中進度條的固定位置元素。以下是您可以用作起點的一些基本樣式。

#Loader { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    display: none; 
    background-color: #fff; 
    opacity: 0.6; 
    z-index: 99999; 
}

來源

2016-11-11 17:31:49 Kev

也許我需要在文檔準備好內寫這個函數 –

我正在使用短文檔準備上面。請參閱https://stackoverflow.com/questions/6004129/document-ready-shorthand。您也可以將它編寫爲IIFE - 請參閱https：// stackoverflow。com/questions/8228281 /這是什麼功能在JavaScript中的構造 – Kev

那麼，首先你需要做任何你想要的圖像疊加。這只是CSS/HTML，直到您的演示文稿。但這裏的做到這一點的一種方法：

$(trigger).on('whatever', function(){ 
... 
    $(loading_selector).show() 
    $.ajax({ ..., 
      success:function(data) { 
       $(loading_selector).hide(); 
        } 
      }); 
});

這裏的問題是，如果你的Ajax失敗加載選擇器不會隱藏，所以你需要在添加一些代碼捕捉阿賈克斯錯誤和隱藏裝載窗格在那個邏輯塊中也是如此。

來源

2016-11-11 17:32:15 rob

你叫阿賈克斯之前使用show負載指示和隱藏它AFTE的成功或錯誤的情況下，也可以使用jQuery阿賈克斯的完整的處理程序

$("#send").click(function() { 
    if ($("#ccval").val() == $("#contactcaptcha").text()) { 
    var id = $("#contactcaptcha").attr("data-id"); 
    var cemail = $("#cemail").val(); 
    //Start showing loading indicator 
    showLoadingIndicator(); 
    $.post(base_url + "index.php/myad/getphonenumber", { 
     uniqueid: id, 
     emailaddress: cemail 
    }, function() { 
     hideLoadingIndicator(); 
     alert('email is sent'); 
    }) 
} else { 
    hideLoadingIndicator(); 
    $("#ccval").val(""); 
    $("#ccval").attr("placeholder", "invalid captcha"); 
}})});

來源

2016-11-11 17:32:50 Devesh

兄弟它不工作 –

@ShahRushabh我希望你會添加邏輯showLoadingIndicator和hideLoadingIndicator，這將顯示與Zindex 1000和寬的div和身高爲100％ – Devesh

我無法理解哪些將顯示Zindex 1000像div和寬度和高度爲100％的div，你可以請將它添加在代碼中。 –

顯示它發送請求之前和隱藏當它完成。

$('#loader').show(); 
$.post('example.php', function() { 
    alert('success'); 
}).always(function() { 
    alert('finished'); 
    $('#loader').hide(); 
});

來源

2016-11-11 17:33:06

我在哪裏放置#loader？ –

任何地方在你的身體，只是申請CSS使其看起來像中心加載器@ShahRushabh –

讓你的文檔中的div#ajax-loader地方，並設置它的樣式：

/* You can style this further - this is just an example */ 
#ajax-loader { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    color: #fff; 
    background: rgba(0, 0, 0, 0.5); 
    padding-top: 35%; 
    display: none; 
}

，並把它在文檔中爲：

<div id="ajax-loader">Loading content...</div>

現在，改變你jQuery代碼爲：

$("#send").click(function() { 
    if ($("#ccval").val() == $("#contactcaptcha").text()) { 
     var id = $("#contactcaptcha").attr("data-id"); 
     var cemail = $("#cemail").val(); 

     // notice this line 
     $('#ajax-loader').show(); 
     // this will set display: none; -> display: block; for this element 

     $.post(base_url + "index.php/myad/getphonenumber", { 
      uniqueid: id, 
      emailaddress: cemail 
     }, function() { 
      alert('email is sent'); 

      // notice this line too 
      $('#ajax-loader').hide(); 
      // just toggle the view vice-versa... 
     }) 
    } else { 
     $("#ccval").val(""); 
     $("#ccval").attr("placeholder", "invalid captcha"); 
    } 
});

編輯：此外，強烈建議下面由Kev公佈的答案。

來源

2016-11-11 17:33:31 omerowitz

我添加了以下代碼，但它不顯示可以訪問我的網站sale.coupsoft.com –

你能回答我 –

使用$就我認爲可能是更容易：

$.ajax({ 
    url: base_url + "index.php/myad/getphonenumber", 
    beforeSend: function(xhr){ 
    //show load }, 
    data: { uniqueid: id, emailaddress: cemail } 
    }).done(function(d){ 
    alert('email is sent'); 
    }).always(function(){ 
    //remove load 
    })

來源

2016-11-11 17:41:47

當ajax工作時顯示加載器

回答

相關問題