Hashchange提交

Question

我的剧本有问题。如果我用空格输入什么东西，即：google map，它会在输入框中更改：google+map，我不喜欢。还有..。当我再次提交报告时，情况会更加糟糕。

<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 name="input" action="" method="get">上使用表单方法'GET‘。根据W3推荐这里

1.3选择HTTP或POST的快速检查列表 使用GET if:交互更像是一个问题(也就是说，它是一个安全的操作，例如查询、读取操作或查找)。使用POST if:交互更像是订单，或者交互以用户感知的方式改变资源的状态(例如，对服务的订阅)，或者让用户对交互的结果负责。

在GET中，数据是以URI发送的，URI中没有spaces，因此出现了问题。

但是，如果需要为此使用GET请求，则使用decodeURIComponent to decodeURIComponent(values[1])来转义值