天天看点

ajax防止多次点击重复提交

以前在做ajax应用的时候遇到过,多次点击提交按钮的时候重复提交的问题

解决方法很简单,当点击提交按钮的时候,把这个提交这个处理函数给解绑掉,请求完成的时候在绑定回来,如果绑定的是有名函做法相对简单类似如下代码:

function clickHandler(){
    $(this).unbind('click', clickHandler);
    $.ajax({
        url : 'url',
        dataType : 'json',
        type : 'post',
        success : function (data) {
            if (data.success) {
                //提交成功做跳转处理
            } else {
                //处理失败,重新绑定点击事件
                alert(data.message);
                $(self).click(clickHandler);
            }
        }
    });
}
$('#buntton').click(clickHandler);
           

当用匿名函数绑定的时候需要用一个变量把arguments.callee存起来,一遍请求完成后重新绑定示例代码如下:

$('#buntton').click(function () {
    var fn = arguments.callee,
        self = this;
    $(self).unbind('click', fn);
    $.ajax({
        url : 'url',
        dataType : 'json',
        type : 'post',
        success : function (data) {
            if (data.success) {
               //提交成功做跳转处理
            } else {
                //处理失败,重新绑定点击事件
                alert(data.message);
                $(self).click(fn);
            }
        }
    });
});
           

注:callee 属性是 arguments 对象的一个成员,他表示对函数对象本身的引用

继续阅读