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); 
    }); 
    }