AJAX形式如何顯示加載gif

Question

我有用jQuery驗證插件編寫的這個AJAX提交表單。這一切都很完美，但我注意到人們在腳本完成之前重新提交表單，並導致數據庫中出現重複記錄。這裏是我的代碼至今：

$(document).ready(function(){ 
$("#myform").validate({ 
    debug: false, 
    rules: { 
     fname: {required: true}, 
     sname: {required: true}, 
     sex: {required: true}, 
    }, 
    messages: { 
     fname: {required: "- Field required."}, 
     sname: {required: "- Field required."}, 
     sex: {required: "- Field required."}, 
    }, 
    errorPlacement: function(error, element) { 
     if (element.is(":radio")) { 
     error.appendTo('.radioError'); 
     } 
     else { 
     error.insertAfter(element); 
     } 
    }, 
    submitHandler: function(form) { 
     $.post('process_participant.php', $("#myform").serialize(), function(data) { 
      $('#results').html(data); 
     }); 
     } 
    }); 
}); 

誰能向我解釋如何，直到我的劇本完成並且加載GIF替換我的實際結果擴大此碼把一個加載GIF到我的結果DIV ？我認爲這會阻止人們雙擊提交按鈕。

Answer 1

在你submitHandler功能，您可以隱藏表單處理之前$.post通話，然後在$.post回調函數，重新展現你的形式，和做所有你想要的事情。

submitHandler: function(form) { 
    $("#myform").hide(); // Hide the form 
    // Here you can insert a loading pic 
    $.post('process_participant.php', $("#myform").serialize(), function(data) { 
     // Here you can remove the loading pic 
     $("#myform").show(); // Show the form 
     $('#results').html(data); 
    }); 
} 

Answer 2

這樣的事情會做的伎倆。我也禁用提交按鈕，直到完成後，所以你避免重複的子彈。

$('#mySubmitButton').prop('disabled',true); // Disable submit button 
$('#myAjaxIndicator').show(); // Show ajax indicator 

$.post('process_participant.php', $("#myform").serialize(), function(data) { 
    $('#results').html(data); 
}) 
.complete(function() { 
    $('#mySubmitButton').prop('disabled',false); // Enable submit button 
    $('#myAjaxIndicator').hide(); // Hide ajax indicator 
}); 

complete回調中成功或錯誤的情況下，這樣你就啓用按鈕隱藏在任何情況下指標執行。

Answer 3

$("#myform").submit(function(){ 
    $('#results').html('<img src="gifUrl" />'); 
}); 

在這種情況下

或精確

submitHandler: function(form) { 
    $('#results').html('<img src="gifUrl" />'); 
    $.post('process_participant.php', $("#myform").serialize(), function(data) { 
     $('#results').html(data); 
    }); 
    }