javascript - 通过ajax提交表单,点击按钮一次,ajax提交多次是什么原因?
黄舟
黄舟 2017-04-10 15:28:04
[JavaScript讨论组]

通过ajax来提交评论,有时候,点击一次按钮(type=button),ajax会重复提交多次请求,并且重复的次数也不固定,有时候会多次提交请求,有时候不会,不知道是因为使用button按钮的原因还是其他的原因?

//提交按钮,是一个<input type="button" />的类型
$form.find('#commentsubmit').on('click',function()
{
    var content= $.trim(um.getContent()),
        form=this.form,
        quoteNumber=form.quote_number.value,
        quoteName=form.quote_name.value,
        hasComment=$container.find('.replycomment').length > 0 ? 1: 0;//当前是否存在评论
    //console.log(content);
    if(content)
    {
        var param={replyId:replyid,content:content,quoteNumber:quoteNumber,quoteName:quoteName,hasComment:hasComment};
        //这里提交请求,有时候会多次提交
        $.post('/post/newcomment',param,function(data)
        {
            if(data.status)
            {
                if(hasComment){
                    $container.find('.commentlist').append(data.html);
                }else{
                    $container.prepend(data.html);
                }
                $self.attr('data-comments',comments+1).find('.commentsnumber').text(comments+1);
            }
        },'json');
    }
});
黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(3)
ringa_lee

做好防重复提交就好了。
在form内, 点击button默认也是会提交表单的,不过默认的提交方式不是ajax。你绑定在button上的事件是以ajax提交表单数据,所以可以看看是重复的请求是什么类型的;
如果一个是ajax请求, 一个不是,则就应该是点击button的时候,默认行为和自定义行为都发生了。
如果两个都是ajax请求,则可能是button被连续点击了多次。
通用的方式是:

  • 禁用button的默认行为
  • 绑定在button上的提交事件,提交表单之前检查当前的提交状态。可以参考yyzl的方式,也可以给button给定一个特定class,表示提交的状态,在事件处理完成后,删除这个class.
黄舟

按你这种写法,当然会提交多次。没人说点击事件只能执行一次。两种办法,一是把on改成one,使得点击提交事件只发生一次;二是点击之后把按钮button禁用(disabled属性),或者移除button上绑定的事件(off方法)。

天蓬老师

type为button和submit的input按钮点击时候会提交表单,再加上你写的事件应该就是会重复,要不你把input[type=button]换成p试试?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号