jquery - 如何阻止用户发送垃圾邮件提交按钮并发送多个 ajax 请求？

Question

我有一个输入被禁用，除非文本框内有文本，但是当用户添加文本并尽快按下提交按钮时，ajax 会运行多次，在数据库中插入相同的文本结束了，这是我提交表单的 jQuery；

$('#content').on("submit", "#message_reply", function(){

    $.ajax({
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        headers: {'X-Requested-With': 'XMLHttpRequest'},
        dataType: 'json',
        data: $(this).serialize(),
        success: function(data){
            if(!data.success){
                $.notify(data.error, "error");
            }else{
                $('#newMessage').prop('disabled', true);
                $('#newMessage').val('');
                $("#content").load("<?php echo Config::get('URL'); ?>messages/message/" + jQuery('input[name="message"]').val(), function(){
                    $('#content').fadeIn('slow');
                });
            }
        }
    });
    return false;
});

检查文本框内是否有文本的代码:

$(function(){
    $('#newMessage').on("keyup", function(){
        if($(this).val()){
            $('#reply_submit').prop('disabled', false);
        }else{
            $('#reply_submit').prop('disabled', true);
        }
    });
});

和我的表格:

            <form action="<?php echo config::get('URL'); ?>messages/reply" method="POST" id="message_reply">
                <input type="hidden" name="message" value="<?php echo System::escape($this->message->message_id); ?>">
                <textarea id="newMessage" class="form-control" name="reply" rows="4" placeholder=""></textarea>
                <input style="margin-top: 20px;" type="submit" id="reply_submit" disabled name="submit" value="<?php echo System::translate("Send"); ?>" class="btn btn-success pull-right">
            </form>
            <!-- wysiwyg !-->

如您所见，我尝试禁用文本框并清空值，但这在几毫秒的时间内不起作用，允许提交相同的数据 3 或 4 次

如何阻止这种情况发生？

Answer 1

只需在单击后禁用按钮，并在 AJAX 成功后超时后重新启用它:

$('#content').on("submit", "#message_reply", function(){
  $this = $("#reply_submit");
  $this.prop("disabled", true);
  $.ajax({
    type: $(this).attr('method'),
    url: $(this).attr('action'),
    headers: {'X-Requested-With': 'XMLHttpRequest'},
    dataType: 'json',
    data: $(this).serialize(),
    success: function(data){
      if(!data.success){
        $.notify(data.error, "error");
      }else{
        $('#newMessage').prop('disabled', true);
        $('#newMessage').val('');
        $("#content").load("<?php echo Config::get('URL'); ?>messages/message/" + jQuery('input[name="message"]').val(), function(){
          $('#content').fadeIn('slow');
        });
      }
    },
    complete: function () {
      setTimeout(function () {
        $this.prop("disabled", false);
      }, 1000);
    }
  });
});