jquery - 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 放入我的结果 div 中，直到我的脚本完成并将加载 gif 替换为我的实际结果吗？我认为这会阻止人们双击提交按钮。

Answer 1

像这样的事情就可以解决问题。我还将禁用提交按钮，直到帖子完成，这样您就可以避免重复提交。

$('#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 回调在成功或错误时执行，因此您可以在任何情况下启用按钮并隐藏指示器。