如果您在表单提交之前尝试重定向会发生什么？

Question

我在一个正在研究的网站上遇到了这个奇怪的代码,并且不明白我所看到的行为是如何或为何发生的.

<input type="submit" value="Save" onclick="document.location.href='http://www.google.com'" />

(更改了href;它实际上指向了与表单操作相同的URL).

因为onclick事件在提交表单之前触发,我希望此代码将页面重定向到Google.com,从而停止执行页面并且永远不会提交表单.或者可能重定向到Google.com但仍然完成提交表单.

但是发生的事情似乎是重定向完全被忽略了,无论如何都要提交表单.为什么会这样？
我确认onclick事件发生得很好; 我将重定向移动到一个函数中并调用了函数onclick.在提交之前调用该函数就好了,但是重定向似乎被忽略了.

Answer 1

我刚刚在不同的浏览器中测试了这种行为，所有浏览器都给出了相同的结果，这是我的结论：

<!-- submit button inside form -->
<form method="post">
    <input type="submit" value="submit" /> <!-- onclick = submitted to same page -->
    <input type="submit" value="submitNredirect" onclick="document.location.href='http://www.google.com';" /> <!-- onclick = submitted to same page, ignored redirect -->
</form>
<!-- submit button without form -->
<input type="submit" value="submit" /> <!-- onclick = no submit or redirect occur -->
<input type="submit" value="submitNredirect" onclick="document.location.href='http://www.google.com';" /> <!-- onclick = redirect -->

如您所知，javascript 是线性的，它执行首先出现的代码行。假设我们有这个表格：

<form id="myform" method="post" onsubmit="alert('onsubmit');">
    <input id="mybtn" type="submit" value="submit" onclick="alert('onclick');" />
</form>
<script>
    $(document).ready(function() {
        $('#mybtn').bind('click', function() {
            alert('bind click');
        });
        $('#myform').bind('submit', function() {
            alert('bind submit');
        });
        // onclick > bind click > onsubmit > bind submit
    });
</script>

单击按钮时，绑定到按钮的事件首先发生（“单击”事件），然后绑定到表单的事件接下来发生（“提交”事件）。结果如下：

1. 警报：点击
2. 警报：绑定点击
3. 警报：提交时
4. 警报：绑定提交
5. 表单提交

如果您在任何函数中包含任何重定向代码，重定向将被忽略并发生提交，我相信 javascript 会覆盖document.location.href表单发布过程，“表单提交”就像在末尾的隐式/隐藏代码行脚本，如果您return false;在某些时候不这样做，则会执行此隐式/隐藏行。

我不是专家，但这是我经过一些测试后的理解。如果我错了，请纠正我。

编辑：如果我们document.location.href在每个函数中都包含 a怎么办？像这样：

<form id="myform" method="post" onsubmit="document.location.href='http://www.onsumbit.com';">
    <input id="mybtn" type="submit" value="submit" onclick="document.location.href='http://www.onclick.com';" />
</form>
<script>
    $(document).ready(function() {
        $('#mybtn').bind('click', function() {
            document.location.href='http://www.bindclick.com';
            return false;
        });
        $('#myform').bind('submit', function() {
            document.location.href='http://www.bindsumbit.com';
        });
    });
</script>

"href" 的字符串值的状态变化如下（但在脚本末尾执行重定向）：

1. document.location.href = ' http://www.onclick.com ';
2. document.location.href = ' http://www.bindclick.com ';
3. document.location.href = ' http://www.onsubmit.com ';
4. document.location.href = ' http://www.bindsubmit.com ';
5. document.location.href = '/'; //表单提交
6. javascript，根据“href”字符串值进行重定向

但我们return false;在 #2 之后，这意味着将对“ http://www.bindclick.com ”进行重定向