Question

我想阻止多个ajax调用（用户按住enter键或多按提交或其他）

我在想，最好的方法是使用带有之前表单帖子值的var，并在每次点击/提交时比较它们。它是否相同？：然后什么都不做

但我不知道如何去做它

这是我的javascript / jquery：

$('form').submit(function() {

    $theform = $(this);

    $.ajax({
    url: 'validate.php',
    type: 'POST',
    cache: false,
    timeout: 5000,
    data: $theform.serialize(),
    success: function(data) {
        if (data=='' || !data || data=='-' || data=='ok') {
            // something went wrong (ajax/response) or everything is ok, submit and continue to php validation
            $('input[type=submit]',$theform).attr('disabled', 'disabled');
            $theform.unbind('submit').submit();
        } else {
            // ajax/response is ok, but user input did not validate, so don't submit
            console.log('test');
            $('#jserrors').html('<p class="error">' + data + '</p>');
        }
    },
    error: function(e) {
        // something went wrong (ajax), submit and continue to php validation
        $('input[type=submit]',$theform).attr('disabled', 'disabled');
        $theform.unbind('submit').submit();
    }
    });

    return false;

});

Answer 1

在这里命名变量不是很有创意：

var serial_token = '';

$('form').submit(function() {

    $theform = $(this);

    if ($(this).serialize() === serial_token) {
        console.log('multiple ajax call detected');
        return false;
    }
    else {
        serial_token = $(this).serialize();
    }


    $.ajax({
    url: 'validate.php',
    type: 'POST',
    cache: false,
    timeout: 5000,
    data: $theform.serialize(),
    success: function(data) {
        if (data=='' || !data || data=='-' || data=='ok') {
            // something went wrong (ajax/response) or everything is ok, submit and continue to php validation
            $('input[type=submit]',$theform).attr('disabled', 'disabled');
            $theform.unbind('submit').submit();
        } else {
            // ajax/response is ok, but user input did not validate, so don't submit
            console.log('test');
            $('#jserrors').html('<p class="error">' + data + '</p>');
        }
    },
    error: function(e) {
        // something went wrong (ajax), submit and continue to php validation
        $('input[type=submit]',$theform).attr('disabled', 'disabled');
        $theform.unbind('submit').submit();
    }
    });

    return false;

});

你可以将它与一个中止提交的超时/间隔函数结合起来，但上面的代码应该只是比较表格中的数据

Answer 2

如果你有某种提交按钮，只需添加一个“禁用”的课程即可。当你开始ajax调用时，它会在尝试拨打电话之前检查它是否存在。在服务器给出响应时删除该类。类似的东西：

...

$theform = $(this);
$button = $theform.find('input[type=submit]');

if ($button.hasClass('disabled')) {
    return false;
}

$button.addClass('disabled');

 $.ajax({

     ....

     },
     complete: function () {
         $button.removeClass('disabled');
     }
 });

...

如果表单值已更改，则仅发送post / get

2 个答案: