为什么这样的代码会导致重复的表单提交


why would such code cause duplicate form submitting?

我想使用ajax提交我的表单,这是我的php代码:

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        <script type='text/javascript' src="./js/jquery.min.js"></script>
        <script>
            $(function(){
                $("button#submitButton").click(function(e){
                    var frm = $("#testForm");
                    frm.submit(function(ev){
                        var smt = $("#submitButton");
                        $.ajax({
                            type : frm.attr('method'),
                            url : frm.attr('action'),
                            data : frm.serialize(),
                            success : function(d){
                                alert(d);
                            }
                        });
                        ev.preventDefault();
                    });
                });
            });
        </script>
    </head>
    <body>
        <form id='testForm' action='process.php' method = 'post'>
            <label for='test1'>test1</label>
            <input name='test1' id='test1'></input>
            <button id='submitButton'>submit</button>
        </form>
    </body>
</html>

当我第一次点击按钮时,它运行良好,预期的消息会被提醒,然而,如果我再次点击按钮,消息会被警告两次,如果我第三次点击按钮,信息会被提醒三次。为什么它会这么做?

在您的案例中,每次单击按钮都会向表单添加一个新的表单提交处理程序,因此当第二次单击按钮时,会有2个提交处理程序添加到表单中,因此ajax代码会执行2次,下一次单击时会有3个处理程序注册,因此ajax会执行3次。

由于该按钮在表单中,默认情况下单击它将触发表单提交,因此您可以直接注册表单提交处理程序。

$(function () {
    var frm = $("#testForm");
    frm.submit(function (ev) {
        var smt = $("#submitButton");
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (d) {
                alert(d);
            }
        });
        ev.preventDefault();
    });
});