使用ajax提交表單時未顯示gif spinner

我想在用戶使用ajax單擊提交按鈕時添加一個加載gif到我的表單，並且我還想禁用提交按鈕。我試過這種方式，但它不起作用。我的按鈕確實有「提交」使用ajax提交表單時未顯示gif spinner

<script type="text/javascript">         
// we will add our javascript code here 
jQuery(document).ready(function($) { 

    $("#ajax-contact-form").submit(function() { 
     var str = $(this).serialize(); 

     $.ajax({ 
      type: "POST", 
      url: "contactfinal.php", 
      data: str, 
      success: function(response) { 
$('submit').html('<img src="img/ajax-loader.gif" /> &nbsp; sending...').attr('disabled', 'disabled'); 
       $('#error').html(response); 

      } 
     }); 
     return false; 
    }); 
}); 
</script>

來源

2016-06-25 Jonathan

我想你想在你的ajax調用之前禁用你的按鈕。現在它將在服務器調用響應後禁用該按鈕（假設代碼正確）。用戶可以在這段時間內做無限次的帖子。如果提交了id，使用$（'＃submit'）通過jquery查找該元素。不知道你爲什麼改變它的HTML並嘗試禁用某些東西，似乎你需要選擇其中的一個選項。 – Noppey

嘗試這種方式

$.ajax({ 
    type: "POST", 
    url: "contactfinal.php", 
    data: str, 
    success: function(response) { 
    // $('#error').html(response); 
    } 
    beforeSend: function() { 
    $('submit').html('<img src="img/ajax-loader.gif" /> &nbsp; sending...').attr('disabled', 'disabled'); 
    }, 
    complete: function() { 
    $('submit').html('').attr('disabled', ''); 
    }, 
});

beforeSend方法，而Ajax是等待服務器響應將採取行動，並complete也將採取行動的ID，在ajax確定瀏覽器完全收到服務器響應後。

希望你會明白。

來源

2016-06-25 13:25:38 Fil

我試過了，它不起作用，但也許我只是沒有正確地將它合併到腳本的其餘部分？我不知道如何將代碼粘貼到我的回覆中。我試過了但說它太長了。 – Jonathan

你可以試試jsfiddle來展示你做了什麼，並再次粘貼這裏的鏈接。 – Fil

好的，我沒有這樣做過，所以希望這是正確的。 https://jsfiddle.net/9x8rh9w8/#&togetherjs=PKGwrGgF9P – Jonathan

jQuery(document).ready(function($) { 
$("#ajax-contact-form").submit(function() { 

     var str = $(this).serialize(); 

     $.ajax({ 
      type: "POST", 
      url: "contactfinal.php", 
      data: str, 
      beforeSend: function() { 
       $("#submit").hide(); 
       $("#loading").show(); 
        }, 
      success: function(response) { 
       $('#error').html(response); 
       $("#submit").show(); 
       $("#loading").hide(); 

      } 
     }); 
     return false; 
    }); 
});

來源

2016-06-25 18:13:12 Jonathan

使用ajax提交表單時未顯示gif spinner

回答

相關問題