开发者社区> 问答> 正文

jquery ajax 如何避免重复提交

之前的做法 就是把按钮给禁用掉,
突然 想起文本框里敲回车 还是会提交表单。
现在打算用一变量来标记是否已经点击了提交。
我想知道的是 还有没别的 更优雅的方法?

展开
收起
小旋风柴进 2016-03-24 10:44:49 2020 0
1 条回答
写回答
取消 提交回答
  • 用一个变量加锁

    var lock = false;
    执行Ajax的事件起初处判断

    if (lock) {return;}
    在Ajax发送前

    lock = true;
    在Ajax返回或错误后的回调函数中

    lock = false;
    如果你觉得无效化按钮挺优雅的话,那可以把整个表单都无效化加上 disabled ,就不担心回车的问题了,嫌麻烦还有简单的。 写一个loading

    .loading {
      position: absolute;
      z-index: 10000;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: url(...) center center;
    }

    然后像上面的变量一样的,加锁时放入这个loading的标签,比如

    $('form').append($('div').addClass('loading'));
    回调后解锁时删除它

    $('form').find('.loadding').detach();

    2019-07-17 19:12:12
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载