如何在表单提交后避免重定向，如果您的表单操作中有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> 

在脚本文件，我有这样的代码段，我提交DATAS，而在一个模式对话框我说，谢谢你的订阅者后，他们通过验证。

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); 
           }); 
          }, 

不幸的是，在我提交数据之后，我被导航到表单行为中给出的域。我试图插入返回false;代码中的（首先进入表单标记，然后进入js代码），但数据未插入到数据库中。如果我只想发布数据并留在自己的网站上并提供自己的反馈，那么我需要做什么？

我编辑埃里克·马丁的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 
}); 

更新

以下是完整的答案，您的评论

我想这一点，但没有奏效。我需要在成功部分提交数据，不是吗？

也许，这取决于你的逻辑和你的确切需求。通常做你所要求的，我使用jQuery Form Plugin，这很好地处理这种行为。

从你的评论我看到你没有提交表格本身与$.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调用将在表单提交后执行。因此，如果这是您需要的问题，您应该更改上面的代码，并使用替代ajaxForm调用，它接受一个options object。所以上面的代码可以改写为

$(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 */ } 
    }); 
});