在運行PHP腳本時顯示加載圖像

Question

我一直在閱讀有關這些問題的答案，但我無法弄清楚。 主要是因為我知道零AJAX和JavaScript。

我有一個帶有按鈕的頁面，當用戶單擊該按鈕時...一個php腳本掃描服務器中的文件夾，並對數據庫進行各種處理。

我想在這種情況下顯示加載的gif。 用戶不會發送信息或接收任何東西，只需單擊一個按鈕即可。

我的第一次嘗試是將用戶發送到php文件...這是一個例子（僅作為示例）。 並在DOM加載時放置一個顯示圖像的div。 但這是行不通的，實際上，它甚至都沒有顯示空白頁面，我仍然可以看到單擊按鈕的頁面，並且由於php腳本的末尾具有重定向，所以我只能看到正在加載瀏覽器的圖標作為發生事件的指示器。

<html>
    <head>
        <title></title>
        <script type="text/javascript">
            $(window).load(function() {
                $(".loader").fadeOut("slow");
            })
        </script>
        <style type="text/css">
            .loader {
                position: fixed;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 9999;
                background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
            }
        </style>
    </head>
    <body>
        <div class="loader"></div>
        <!-- PHP SHOULD DO STUFF HERE THEN REDIRECT BACK TO WHERE THE BUTTON WAS CLICKED-->
    </body>
</html>

我了解我必須將php部分與“視圖”部分分開。 所以我的問題是...我如何使按鈕顯示加載的gif ...同時以某種方式從服務器端運行php腳本。

我也嘗試過：

<script type="text/javascript">
$('#buttonid').click(function(){
  $('.loader').show();
  $.ajax({
   type: 'POST',
   url: 'script.php',
   success:function(result){
       $('.loader').hide();
   }
}
</script>

但這也不起作用。 我在腳本上禁用了重定向，當它完成運行后，它會將我帶到該頁面，而不是停留在進行呼叫的頁面上。

Answer 1

您顯示的Javascript很好，並且是正確的方法。 不要重定向到任何地方，不要包含任何其他JS。 如果我正確理解：

我在腳本上禁用了重定向，當它完成運行后，它會將我帶到該頁面，而不是停留在進行呼叫的頁面上。

您的意思是單擊按鈕會將您發送到script.php 。 您尚未包含按鈕HTML，但我想您的按鈕位於<form> 。 當您單擊它時，將觸發jQuery click處理程序，但也將提交表單，就像完全沒有Javascript一樣。 這將使您進入script.php ，這就是您所看到的。

您需要停止默認的表單提交，以便僅觸發Javascript處理程序。 您可以按照以下步驟進行操作：

// Event handlers are passed an event object as a parameter
$('#buttonid').click(function(e){

  // Prevent the normal action this event would cause, in this case 
  // submitting the form
  e.preventDefault();

  // ... continue with the rest of your code
  $('.loader').show();

jQuery文檔中的更多信息。

在運行PHP腳本時顯示加載圖像

問題描述

1 個解決方案

解決方案1
0 2017-01-25 22:34:40

在運行PHP腳本時顯示加載圖像

問題描述

1 個解決方案

解決方案1 0 2017-01-25 22:34:40

解決方案1
0 2017-01-25 22:34:40