如何使用jQuery提交表单并重新加载页面

Question

我正在尝试弄清楚这是否可能。

我有一个带有动作到新窗口“Bar”的表单“Form-Foo”的页面A。

在点击提交后，我想要提交表单并重新加载页面A。

到目前为止，我只能让其中一个起作用...如果有任何指针，将不胜感激。

除了DudeSolutions的解决方案...我还尝试了这个：

$(document).ready(function() {
    $('#foo').submit(function() {
        $.post('bar.asp', $(#foo).serialize(), function(data) {

                window.location.reload();

        });

    });
});

同样的结果......我可以提交表单并打开一个新标签页......但是页面A没有重新加载。

- Webjedi

---

如果您能概述一下您尝试过的内容，那么其他人就会知道哪些方法对您无效，这肯定会有所帮助。 - charlietfl

我认为AJAX是解决你的问题的方案。 - Bali Balo

你考虑将你的操作指向一个 JavaScript 函数，此函数处理你的表单提交，之后 setTimeout("location.reload(true);",timeoutPeriod);。 - Mehdi Karamosly

Answer 1

如果您打算提交表单并重新加载页面，那么这将是默认行为，只有在操作属性中的url不正确时才需要更改URL。如果是这样，请更改URL，如果要重新加载新页面，则无需使用ajax：

$(function() {
    $('#Form-Foo').attr('action', 'Page-A url');
});

或者：

$(function() {
    $('#foo').on('submit', function(e) {
          e.preventDefault();
          setTimeout(function() {
               window.location.reload();
          },0);
          this.submit();
    });
});

只需将刷新排队即可等待表单发送后重新加载页面，但由于大多数浏览器在您离开浏览器选项卡时停止超时，因此直到您返回该选项卡才会真正重新加载，但这应该是不可察觉的。

- adeneo

Answer 2

这是一个想法：

  <script type="text/javascript">
    $("#my_form").submit(function() {
      $.ajax({
        type: "POST",
        url: "/path/to/post/handler/",
        data: $("#my_form").serializeArray(),
        success: function() {
    top.reload();
        }
        });
    return false;
});</script>

- FredTheWebGuy

---

这基本上就是我一直在尝试的。表单提交后，新页面打开并显示预期结果，但Page-A没有重新加载。 - Webjedi