如何防止重复发送ajax jQuery？

Question

我有一个按钮

<span class="btn btn-primary" id="open-label"><i class="icon-plus icon-white"></i> Add label</span>

打开模态窗口（@98​​7654321@）

<div id="ajax-labels"></div>

<div id="labels-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h3 id="header">Add label</h3>
    </div>
    <div class="modal-body">
        <div class="control-group">
            <label class="control-label" for="name">Name</label>
            <div class="controls">
                <input type="text" id="name">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="color">Color</label>
            <div class="controls">
                <input type="text" id="color" name="color" value="#a5f3d4" size="6" class="iColorPicker" />
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary" id="submit-label"><i class="icon-ok icon-white"></i> Add label</button>
    </div>
</div>

<script>

function append_labels() {
    $("#ajax-labels").empty();
    $.ajax({
        url: "/ajax",
        type: "POST",
        cache: false,
        data: {
            type: "get_labels"
        },
        success: function (html) {
            labels = $.parseJSON(html);
            $.each(labels, function () {
                $("#ajax-labels").append('<span class="label" id="' + this.id + '" style="background-color: ' + this.color + '">' + this.name + '<i id="edit-label" class="icon-pencil icon-white"></i></span>   ');
            });
        }
    });
}

$('span#open-label').click(function () {
    $('#labels-modal').modal('show');
    $('#labels-modal #submit-label').click(function () {
        $('#labels-modal #submit-label').prop('disabled', true);

        var name = $('#labels-modal #name').val().trim();
        var color = $('#labels-modal #color').val().trim();

        if (name != '' || color != '') {
            $.ajax({
                url: "/ajax",
                type: "POST",
                cache: false,
                data: {
                    type: "add_label",
                    name: name,
                    color: color
                },
                success: function () {
                    $('#labels-modal').modal('hide');
                    append_labels();
                }
            });
        } else {
            return false;
        }
    });
});

</script>

填充标签后，用户点击“添加标签”和jquery发送请求，发送后，脚本关闭模式并刷新（在ajax上）标签列表。问题 - 如果用户快速点击“添加标签”，脚本会重复发送表单，我会在数据库中加倍响应。我怎样才能防止这种情况？

Answer 1

尝试使用one

$('span#open-label').one('click', function () { //...

这将保证您的 modal/ajax 函数只执行一次。

Answer 2

在第一次点击时禁用表单和按钮，以便 UI 不允许额外点击。您可以手动执行此操作，或使用jQuery Block UI plugin。

这是另一篇关于如何做到这一点的帖子：jquery disable submit button on form submission

编辑：

您正在单击处理程序内定义事件处理程序。因此，jQuery 所做的是在每次触发包含单击时分配该事件处理程序。因此，根据执行顶级点击的次数，您的 AJAX 调用将触发多少次。即使您的按钮只有 1 次点击，之前的点击也是罪魁祸首。将该单击处理程序定义提取到另一个之外，您应该一切顺利。

$('span#open-label').click(function () {
    $('#labels-modal').modal('show');
});

$('#labels-modal #submit-label').click(function () {
    $('#labels-modal #submit-label').prop('disabled', true);

    var name = $('#labels-modal #name').val().trim();
    var color = $('#labels-modal #color').val().trim();

    if (name != '' || color != '') {
        $.ajax({
            url: "/ajax",
            type: "POST",
            cache: false,
            data: {
                type: "add_label",
                name: name,
                color: color
            },
            success: function () {
                $('#labels-modal').modal('hide');
                append_labels();
            }
        });
    } else {
        return false;
    }
});

Answer 3

将此添加到点击处理程序

$('span#open-label').click(function () {

  if( ($(this).attr('clicked') == '1') ) { 
    /* do something else then */ 
    return;
  }
  $(this).attr('clicked', '1');

  $('#labels-modal').modal('show');

这样，您下次点击时可以显示警报。

如果您想“重新激活”“开放标签”，您只需这样做：

 $('span#open-label').attr('clicked', '0');