javascript重定向无法正常工作

Question

我有一个接受用户输入并重定向到URL的窗口的表单，其输入附加到末尾。

这是我的HTML

        <form id="wikiForm">
            <label id="sideBarLabel">VoIP Services
                <input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
            </label>
            <input type="submit" value="Search" onclick="searchWiki();" />
        </form>

它运行的JavaScript

function searchWiki() {
    alert("Form Works!");
    var siteQuery = $('#query-string').val();
    window.location.href = "http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery;
    alert("SECOND MESSAGE");
}

问题是它不会重定向。 只会将'siteQuery'变量附加到当前URL的末尾。 我知道它正在调用javascript，因为我看到了这两个警报。 我不确定我在做什么错。

Answer 1

该问题是由于您实际上是在提交表单而导致的，因为首先提交表单，所以重定向丢失了。 有两种简单的方法可以解决此问题：

1. 将输入的类型从submit更改为button ，或者
2. 通过从函数返回false并将函数调用更改为onclick="return searchWiki();"停止提交表单onclick="return searchWiki();"

jsFiddle示例 （1）

jsFiddle示例 （2）

Answer 2

原因是因为您使用type="submit" ，它会提交GET头并将其发送到默认action参数（当前页面）。

将type="submit"更改为type="button" 。

<form id="wikiForm">
    <label id="sideBarLabel">VoIP Services
        <input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
    </label>
    <input type="button" value="Search" onclick="searchWiki();" />
</form>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    function searchWiki() {
        alert("Form Works!");
        var siteQuery = $('#query-string').val();
        alert(siteQuery);
        window.location.assign("http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery);
        alert("SECOND MESSAGE");
    }
</script>

我用type="submit"尝试了代码，它很警报，但没有重定向，因为提交是在window.location更改之前确定优先级的，这就是它只将?queryString=value附加到当前url的原因。 如果您像上面的代码所示那样更改类型，则它工作正常。

Answer 3

你不能只使用assign吗？

window.location.assign("http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery);

检出： http : //www.w3schools.com/js/js_window_location.asp

Answer 4

改用默认action和method属性

HTML表单元素提供了开箱即用的机制。

<form id="wikiForm" action="http://wiki.voipinnovations.com/dosearchsite.action" method="GET">
    <label id="sideBarLabel">VoIP Services
        <input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
    </label>
    <input type="submit" value="Search" />
</form>

但是，如果必须使用javascript，请进行以下更改：

从：

window.location.href = "…";

至：

window.location.assign("…"); // or
window.location = "…"

这是因为location.href是只读属性，而location.assign()是设置要加载的新位置的正确方法。 您也可以直接为location对象分配一个字符串：

每当将新值分配给位置对象时，都将使用URL加载文档，就像使用修改后的URL调用location.assign（）一样。

资料来源： MDN

Answer 5

将输入类型=提交更改为类型=按钮

http://plnkr.co/edit/w4U7Sbm3XSKN8j3zUFMe?p=preview

<form id="wikiForm">
    <label id="sideBarLabel">VoIP Services
    <input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
    </label>
    <input type="button" value="Search" onclick="searchWiki();" />
</form>