在AJAX請求期間添加「發送郵件...」通知

Question

在我的郵件發送腳本爲我的聯繫表單供電時，郵件發送操作可能需要一些時間，在此期間用戶不知道發生了什麼。所以，我想添加一個「郵件發送...」通知。單擊提交按鈕時會出現「郵件發送...」通知，但腳本處理在此處無限期停止，並且未完成進一步的郵件處理。我將欣賞如何解決這個問題的線索。查找AJAX腳本和html表單代碼。

<script> 
    $(document).ready(function(){ 
     $('#submit').click(function(){ 
      $.post("send.php", $("#contactform").serialize(),function(response) { 
       $('#success').html('<h4>Mail Sending...</h4>').load(url); 
      }); 
      return false; 
     }); 
    }); 
</script> 

這是接觸形式的html代碼：

<form action="" method="post" id="contactform" > 
    <label for="name">Name:</label><br /> 
    <input type="text" name="name" id="name" /><br /> 
    <label for="email">Email:</label><br /> 
    <input type="text" name="email" id="email" /><br /> 
    <label for="message">Message:</label><br /> 
    <textarea name="message" id="message"></textarea><br /> 
    <input type="button" value="send" id="submit" /> 
    <div id="success" style="color:red;"></div> 
</form> 

Answer 1

好，

「在此期間，用戶不知道發生了什麼所以，我想添加一個」郵件發送...「通知」。

ajaxStart怎麼樣，因爲這正是它的目的。

「每當Ajax請求開始時顯示加載消息（且沒有任何消息已經處於活動狀態）。」當ajax請求啓動加載DIV將顯示

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

然後在情況：

你可以簡單的事件處理程序連接到任何元素。一旦ajax完成後，將再次隱藏，因爲它將：

$("#loading").hide(); 

你會希望確保與id（加載）div默認爲隱藏。

---

「但是腳本處理在此處無限期停止，並且未進行進一步的郵件處理。」

每jQUery Post：

如果有jQuery.post（）返回錯誤代碼的請求時，它會悄悄地失敗，除非劇本也被稱爲全球.ajaxError（）方法。或者，從jQuery 1.5開始，jQuery.post（）返回的jqXHR對象的.error（）方法也可用於錯誤處理。

如果您的post失敗，則應返回原因說明。

<script> 
    $(document).ready(function(){ 
     $('#submit').click(function(){ 

      $.post("test.php", $("#testform").serialize()) 
      .done(function(data) { 
       $('#success').html('<h4>Mail Sending...</h4>'); 
        // You should not do a .load within another ajax call so placing it here is okay as it will execute AFTER the original one completes, but it will trigger the ajaxStart method again. 
      }) 
      .fail(function (data) { 
       console.log(data); 
      }); 
     }); 
    }); 
</script> 

不幸的是我在手機上，所以我不能測試上述，以確保它的工作，但這應該讓你開始。