Question

我有一个带有输入的from，除非文本框里面有文本，但是当用户添加文本并且尽可能快地粉碎提交按钮时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

点击后只需disable按钮，并在AJAX成功后的timeOut后重新启用它：

$('#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);
    }
  });
});

Answer 2

只需禁用:submit的相关form元素，并在ajax完整回调中将其重命名，例如：

$('#content').on("submit", "#message_reply", function() {
  var $submit = $(this).find(':submit').prop('disabled', true);
  $.ajax(...).always(function() {
    $submit.prop('disabled', false);
  });
  return false;
});

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

2 个答案: