Hashchange html submit

Hashchange html submit

本文关键字：submit html Hashchange      更新时间：2023-09-26

我的脚本有问题。如果我要用空格键输入一些东西，例如: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]);

您需要使用decodeuriccomponent从散列中转义该值:

$('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]));
}

在这种情况下，不应该使用<form name="input" action="" method="get">的FORM方法'GET'。根据W3推荐此处

1.3 HTTP GET或POST快速选择清单

如果:交互更像一个问题(即，它是一个问题)使用GET安全操作(如查询、读取操作或查找)。使用POST如果:交互更像一个顺序，或者交互改变以用户可以感知的方式显示资源的状态(例如:(对服务的订阅)，或者对用户负责相互作用的结果。

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

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

相关文章：