如果表单操作中有 URL，如何避免表单提交后重定向？

Question

我有一个如下所示的表单：

<form name="formi" method="post"  action="http://domain.name/folder/UserSignUp?f=111222&postMethod=HTML&m=0&j=MAS2"  style="display:none">
...
<button type="submit" class="moreinfo-send moreinfo-button" tabindex="1006">Subscribe</button>

在脚本文件中，我有这个代码段，我在其中提交数据，而在模式框中，我在订阅者通过验证后表示感谢。

function () {
                        $.ajax({
                            url: 'data/moreinfo.php',
                            data: $('#moreinfo-container form').serialize() + '&action=send',
                            type: 'post',
                            cache: false,
                            dataType: 'html',
                            success: function (data) {
                                $('#moreinfo-container .moreinfo-loading').fadeOut(200, function () {
                                    $('form[name=formi]').submit();
                                    $('#moreinfo-container .moreinfo-title').html('Thank you!');
                                    msg.html(data).fadeIn(200);
                                });
                            },

不幸的是，在我提交数据后，我被导航到表单操作中给出的域。我尝试在代码中插入 return false; （首先插入表单标签，然后插入 js 代码），但数据没有插入到数据库中。如果我只想发布数据并留在我的网站上并提供我自己的反馈，我需要做什么。

我编辑了 Eric Martin 的 SimpleModal 联系表单，因此如果需要更多代码来解决我的问题，您可以在此处查看原始代码：http://www.ericmmartin.com/projects/simplemodal-demos/（联系表）

Answer 1

通常返回 false 足以阻止表单提交，因此请仔细检查您的代码。应该是这样的

$('form[name="formi"]').submit(function() {
  $.ajax(...); // do your ajax call here
  return false; // this prevent form submission
});

更新

这是您评论的完整答案

我尝试过这个，但没有成功。我需要在succes部分提交数据，不是吗？

也许，这取决于您的逻辑和您的具体需求。通常，为了完成您要求的操作，我使用 jQuery 表单插件 ，它可以很好地处理这种行为。

从您的评论中我看到您没有使用 $.ajax 调用提交表单本身，但您从该调用中检索了某种数据，不是吗？那么你在这里有两个选择：

使用纯 jQuery（无表单插件）

$('form[name="formi"]').submit(function() {
  $.ajax(...); // your existing ajax call
  // this will post the form using ajax
  $.post($(this).attr('action'), { /* pass here form data */ }, function(data) {
    // here you have server response from form submission in data
  })
  // this prevent form submission
  return false;
});

使用表单插件是相同的，但你不必处理表单数据检索（上面注释的部分）并返回 false，因为插件会为你处理这个。代码就是

$(document).ready(function() { 
  // bind 'myForm' and provide a simple callback function 
  $(form[name="formi"]).ajaxForm(function() {
    // this call back is executed when the form is submitted with success
    $.ajax(...); // your existing ajax call
  }); 
});

这样。请记住，使用上述代码，您现有的 ajax 调用将在表单提交后执行。因此，如果这对您的需求来说是一个问题，您应该更改上面的代码并使用接受 选项对象。所以上面的代码可以重写为

$(document).ready(function() { 
  // bind 'myForm' and provide a simple callback function 
  $(form[name="formi"]).ajaxForm({
    beforeSubmit: function() { $.ajax(...); /* your existing ajax call */},
    success: function(data) { /* handle form success here if you need that */ }
  }); 
});