Question

我想使用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>

当我第一次点击按钮时，它运行良好，预期的消息被警告，但是，如果我再次单击该按钮，消息将被提醒两次，如果我第三次单击该按钮，消息将被警告三次。为什么会这样呢？

Answer 1

在您的情况下，每次单击按钮时，表单中都会添加一个新的表单提交处理程序，因此当第二次单击该按钮时，表单中会添加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();
    });
});

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

1 个答案: