Hashchange html提交

Question

我的腳本存在問題。如果我用空格鍵輸入東西，例如：谷歌地圖它會改變輸入框：谷歌+地圖我不喜歡。 也......當我再次提交，其更嚴重打亂了

<form name="input" action="" method="get"> 
Search: <input type="text" name="search"> 
<input type="submit" value="Submit"> 
    <div id="result"></div> 
</form> 

-

$('form').submit(function() { 
    var form_data = ($(this).serialize()); 
    window.location.hash = form_data.replace('=','/'); 
    return false; 
}); 

$(window).on('hashchange', function() { 
    var values = window.location.hash.slice(1).split('/'); 
    $("[name=" + values[0] + "]").val(values[1]); 
}); 

var values = window.location.hash.slice(1).split('/'); 
$("[name=" + values[0] + "]").val(values[1]); 

Answer 1

您需要使用decodeURIComponent逃脫從哈希值：

$('form').submit(function() { 
    var form_data = ($(this).serialize()); 
    window.location.hash = form_data.replace('=','/'); 
    return false; 
}); 

$(window).on('hashchange', updateVal); 

updateVal(); 

function updateVal() { 
    var values = window.location.hash.slice(1).split('/'); 
    $("[name=" + values[0] + "]").val(decodeURIComponent(values[1])); 
} 

Answer 2

在這種情況下，不應使用FORM方法'GET'<form name="input" action="" method="get">。 據W3推薦的選擇HTTP GET或POST

here

1.3快速清單

使用GET如果：交互更像是一個問題（即，它是一個 安全操作，如查詢，讀取操作或查找）。在以下情況下使用POST ：交互更類似於訂單，或者交互以用戶可以感知的方式更改資源的狀態（例如， 訂閱服務），或者用戶對 交互結果。

在GET中，數據是以URI發送的，URI中沒有spaces，因此存在問題。

但是，如果你需要使用GET請求，此則使用decodeURIComponent來decodeURIComponent(values[1])逃脫值