javascript - 从表单提交更改 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但我怎么能把它改成/search#s=searchvalue使用javascript？

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 小提琴演示。

参考：

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