用 javascript 重写表单 url答案

【问题标题】：Rewriting form urls with javascript用 javascript 重写表单 url
【发布时间】：2011-08-14 12:46:22
【问题描述】：

搜索表单通常会转到丑陋的网址。如果我希望用户看到漂亮的 url，我需要在服务器端重写它们并 http 重定向它们。

我想避免这种往返，并通过一些简单的 javascript 代码重写这个 url。（没有 javascript 你会得到通常的 http 重定向）

最可靠的方法是什么？

【问题讨论】：

您为何如此关注搜索 URL 的外观？与静态页面应该有友好的永久链接不同，搜索结果通常是用户填写搜索表单而不是手动输入 URL 的结果。
用户可以使用搜索表单和各种静态链接访问相同的页面。我正在尝试使这些兼容。

标签： javascript jquery http url redirect

【解决方案1】：

如果，例如，你丑陋的 URI 的形式是

/search.php?query=[input]

你漂亮的 URI 的形式是

/search/[input]

在客户端没有 JavaScript 的情况下保留往返实现（使用 PHP 重定向和 URL 重写）。对于那些这样做的人，拦截相关表单的submit 事件（使用事件对象的preventDefault 方法），并在您的事件处理程序中执行类似

location = '/search/' + encodeURIComponent(queryInputObject.value);

【讨论】：

【解决方案2】：

<form action="http://host/target" method="get">
    ...
    <input type="text" name="query" value="..." />
    <input type="submit" value="Search" />
</form>

会给http://host/target?query=...

使用纯 JS，您可以为 onSubmit 事件添加监听器（未经测试）：

<form action="http://host/target" method="get" onsubmit="window.location.href=this.action + '/' + encodeURIComponent(this.elements['query'].value); return false;">
    ...
    <input type="text" name="query" value="..." />
    <input type="submit" value="Search" />
</form>

会给http://host/target/...

【讨论】：

必须转义附加到 URI 的值。