document.forms.submit挂起了我的页面

我正在制作一个帮助操作SQL表的网站。目前，我希望能够重新加载我的页面，但有一些新的变量。我所做的是通过制作一个表单(称为rerouter)与一些隐藏的文本区域和一个动作，这只是当前页面(在本例中，"连接。php")。像这样:

    <form action='connect.php' method='post' id='rerouter'>
        <input type='hidden' name='foo' id='foo'></input>
        <input type='hidden' name='bar' id='bar'></input>
        <input type='hidden' name='foobar' id='foobar'></input>
    </form>

当需要重新加载页面时，我用我想要的新值填充这些文本区域，然后提交表单，就像这样(getRequest()调用另一个PHP文件，该文件只是创建一个SQL字符串并执行它。我在这里包含它只是为了显示在重新路由过程之前仍然执行的逻辑):

    ...
    getRequest(str, succ, err);
    document.getElementById('foo').value = fooText;
    document.getElementById('foo').value = barTest;
    document.getElementById('foobar').value = foobarText;
    document.forms['rerouter'].submit();

这个工作很好，除了偶尔整个页面冻结。解冻它的唯一方法是重新加载页面，然后它会提示你"哦，snap"错误(在Chrome中)，你需要重新加载。getRequest()仍然正常运行，但是代码在之后的某个地方挂起。除了一遍又一遍地调用这个函数，直到它最终失败，我还没有找到一种方法来一致地重现这个问题，但是如果我发现了一个模式，我会让你们都知道。此外，我没有访问jQuery。

解决方案:@HaukurHaf指出我使用异步AJAX调用不稳定。有时调用forms.submit()时，getRequest()调用的PHP还没有完成。我移动了一些代码，所以我的主函数看起来像:

            ...
    document.getElementById('foo').value = fooText;
    document.getElementById('foo').value = barTest;
    document.getElementById('foobar').value = foobarText;
    getRequest(str, succ, err);

和我的成功函数看起来像:

    function succ() {
        document.forms['rerouter'].submit();
    }

(之前为空)。现在表单将不会提交，直到我们完全确定PHP已经完成执行。