Переписать форму URL с помощью JavaScript

Question

Поисковые формы обычно переходят на некрасивые URL.Если я хочу, чтобы пользователи видели красивые URL-адреса, мне нужно переписать их на стороне сервера и перенаправить их по http.

Я бы хотел избежать этого приема и переписать эти URL-адреса с помощью простого кода JavaScript.(без 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/...