从表单提交更改URL哈希

Question

在我的index.html上，我有以下表格：

<form action="/search" id="search-form">
    <input type="text" id="search-input" name="s" x-webkit-speech>
</form>

哪个正确重定向到/search?s=searchvalue但是如何使用javascript将其更改为/search#s=searchvalue？

Answer 1

不是使用jQuery但是应该可以工作：

<form action="/search" id="search-form"
      onsubmit="location.href=this.action+'#s='+this.s.value; return false;">
    <input type="text" id="search-input" name="s" x-webkit-speech>
</form>

另见这个小提琴手：http://jsfiddle.net/SujwN/

Answer 2

我建议：

$('#search-form').submit(
    function(e){
        e.preventDefault();
        var input = $('#search-input');
        window.location.hash = input.attr('name') + '=' + encodeURIComponent(input.val());
    });

以上，加上on('hashchange', /* other stuff... */)监听器似乎有效：

$(window).on('hashchange', function(e){
    var hash = window.location.hash.substring(1),
        attrValue = hash.split('='),
        varName = attrValue[0],
        varValue = attrValue[1];
    console.log(varName, decodeURIComponent(varValue));
});

JS Fiddle demo

参考文献：

• attr()。
• decodeURIComponent()。
• encodeURIComponent()。
• event.preventDefault()。
• submit()。
• val()。
• window.location.hash。