如何防止重复发送ajax jQuery

How to prevent repeat sending ajax jQuery?

本文关键字：ajax jQuery 何防止      更新时间：2023-09-26

我有一个按钮

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

哪个打开模式窗口(http://twitter.github.com/bootstrap/javascript.html#modals)

<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上）标签列表。问题——如果用户快速点击"添加标签"，脚本会重复发送表单，我的回答会在数据库中翻倍。我该如何防止这种情况发生？

尝试使用一个

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

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

在第一次单击时禁用窗体和按钮，这样UI就不允许进行其他单击。您可以手动执行此操作，也可以使用jQuery Block UI插件。

下面是关于如何做到这一点的另一篇文章：jquery禁用表单提交上的提交按钮

编辑：

您正在单击处理程序中定义一个事件处理程序。因此，jQuery所做的是在每次触发包含的单击时分配该事件处理程序。因此，根据顶级点击执行的次数，将是AJAX调用触发的次数。尽管只点击了一次按钮，但之前的点击是罪魁祸首。将该点击处理程序定义提取到另一个的外部，您应该可以开始了。

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

将其添加到点击处理程序

$('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');
相关文章：