jQuery多次提交表单答案

【问题标题】：jQuery submit form multiple timesjQuery多次提交表单
【发布时间】：2013-05-18 19:31:44
【问题描述】：

我有以下 Bootstrap 联系表：

     <form id="contactForm" class="form-horizontal" data-async data-target="#contact" action="/contact.php" method="POST">
         (...)
         <button class="btn btn-primary pull-right" type="submit">Send</button>
     </form>

还有这个 jQuery 代码：

$('form[data-async]').on('submit', function(event) {
    var $form = $(this);
    var $target = $($form.attr('data-target'));

    $.ajax({
        type: $form.attr('method'),
        url: $form.attr('action'),
        data: $form.serialize(),

        success: function(data, status) {
            $target.html(data);
        }
    });

    event.preventDefault();
});

我可以提交表单并获得一次 AJAX 响应，但第二次尝试这样做时，它会在导航器中加载 contact.php。我没有得到，因为event.preventDefault() 应该防止这种情况。如何使多个 AJAX 调用正常工作？

【问题讨论】：

如果您不想提交，为什么不让它只是一个常规的非提交按钮？
@VedranŠego：我将其设为提交按钮，以便触发 jQuery 函数。我喜欢这个功能，我将在项目的其他地方使用它，所以我想知道是否有办法调整当前表单以允许多次提交。
我不明白为什么你需要一个包装表单元素的提交事件来处理你的动作，也可以通过点击任何元素来调用，你这样做只是为了使用 .序列化（）？
是的。这样，在项目的所有 AJAX 调用中都使用相同的方法。看起来它让事情变得更难而不是更容易。

标签： javascript jquery forms twitter-bootstrap

【解决方案1】：

尝试没有给定复杂性的表单+ajax。如果它有效，那么它与代码有关。

【讨论】：

我使用找到的代码here，它似乎更容易。感谢您的帮助！