1

我正在尝试使用下面的搜索表单和 js 来搜索我的网站。但是,每当您在表单中键入一个单词并单击提交表单时,他们会将用户浏览器带到http://example.com/?s=searchterm,但我希望它把他们带到http://example.com /searchterm并完全省略字符 ?s=

<script type="text/javascript">
function submitform()
{
    document.forms["searchsite"].submit();
}
</script>
<form id="searchsite" action="/">
<input type='text' name='s' placeholder='search'>
<a href="javascript: submitform()">Submit</a>
</form>

有什么积极的建议吗?顺便说一句,不,我不相信我可以使用 htaccess 和 mod_rewrite,因为我已经设置了规则。

4

2 回答 2

3

您可以设置一个onsubmit处理程序来拦截表单的提交,并将默认操作替换为设置位置 href。这依赖于在客户端启用的 JavaScript:

<form id="searchsite" action="/" onsubmit="javascript:location.href=this.action + encodeURIComponent(this.elements.namedItem('s').value); return false;">

这会转义搜索词,以便如果用户在其中输入内容?/服务器会将其解释为路径的一部分,而不是认为客户端正在尝试发送查询字符串或访问某个子目录。由于处理程序已经更新,return false;浏览器应该停止其正常的表单提交过程,这将导致浏览器在处理程序返回后立即开始导航。onsubmitlocation.hrefonsubmit

但是,您确实应该使用服务器端代码对此进行补充。对于这么简单的事情,JavaScript 可以在跳过 HTTP 重定向的同时使您的 URI 更漂亮(这样浏览器会比其他方式稍微快一点地直接转到请求的页面)。但是你真的应该有一个服务器端重定向,只要s发送 GET 参数就会触发。

额外说明:你真的应该用 替换你的提交脚本<button/>,比如:

<button type="submit">Submit</button>

并完全删除您的<a/><script/>标签。通过覆盖表单提交处理程序本身,您可以获得所需的所有功能,无需尝试拦截按钮单击等。通过此更改,您的表单现在应该在用户按下 ENTER 时工作,而不是要求用户按 TAB 键<a/>. 将预期的 HTML 元素用于预期目的并挂钩正确的事件;-)。

我假设您的问题仅与代码的客户端有关,并且您已经知道如何让服务器端代码从 URI 路径中读取值。弄清楚如何读取值,如果以这种方式提交,我需要一些时间来研究,并且需要有关您的服务器端设置的更多信息。

于 2013-06-29T02:44:10.487 回答
1

无需提交表单,而是构建 URL,然后设置位置。您可以将 ID 添加到搜索词(s在本例中),然后简单地构建 URL:

var searchTerm = document.getElementById("s").value;
document.location = "http://example.com/" + searchTerm;
于 2013-06-29T02:41:06.253 回答