如何在表單提交後避免重定向，如果您的表單操作中有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 */ } 
    }); 
});