用 javascript 重寫表單 url

Question

正常搜索 forms go 到丑陋的網址。 如果我希望用戶看到漂亮的 url，我需要在服務器端重寫它們並 http 重定向它們。

我想避免這種往返，並用一些簡單的 javascript 代碼重寫這個 url。 （沒有 javascript 你會得到通常的 http 重定向）

最可靠的方法是什么？

Answer 1

例如，如果你丑陋的 URI 采用以下形式

/search.php?query=[input]

你漂亮的 URI 采用以下形式

/search/[input]

保留往返實現（使用 PHP 重定向和 URL 重寫）以防客戶端沒有 JavaScript。 對於那些這樣做的人，攔截相關表單的submit事件（使用事件對象的preventDefault方法），並在您的事件處理程序中，執行類似的操作

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

Answer 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/...