如何使用 javascript 将编码参数附加到 url？
我有一个搜索输入框，我将其数据附加到“#”后面的 URL，例如 http://test.cl.com/#pqr xyz （使用哈希来避免重新加载页面）。它工作正常，但我的数据未编码，因为空格未替换为 + 或 %20 因此，在附加之前，我使用 encodeURI 函数然后将该值附加到 URL，但地址栏中仍然有空格字符。在分配之前，我已检查是否附加了正确的值（通过提醒 prq%20xyz）。
当前输出：http://test.cl.com/#pqr xyz 所需输出：http://test.cl.com/#pqr+xyz
请帮我找出问题的原因。谢谢！
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jquery1.6.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn').click(function(){
var url = encodeURI("pqr xyz");
alert(url); // shows encoded value
window.location.hash = (url);
});
});
</script>
</head>
<body>
<h3>sample app</h3>
<button id="btn">
append
</button>
</body>
I have a search input box and I am appending its data to an URL after the "#", e.g http://test.cl.com/#pqr xyz (using hash to avoid reloading of page). It is working fine but my data is not encoded as space is not replaced with + or %20 So before appending I am using the encodeURI function and then appending that value to the URL but still in the address bar there is the space character. Before assigning I have checked that I am appending the correct value (by alerting prq%20xyz).
Current output: http://test.cl.com/#pqr xyz
Required output : http://test.cl.com/#pqr+xyz
Please help me to find out the cause of the prob. Thanks!
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jquery1.6.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn').click(function(){
var url = encodeURI("pqr xyz");
alert(url); // shows encoded value
window.location.hash = (url);
});
});
</script>
</head>
<body>
<h3>sample app</h3>
<button id="btn">
append
</button>
</body>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我猜你在 Firefox 上运行测试。现代版本的 Firefox 不会将哈希 url 中的空格字符编码为
%20或+。您可以通过向任何 url 添加带有空格的哈希来进行简单的测试。
其他浏览器会自动将空格转换为
%20，但现代 Firefox 不会。它没有任何问题，也不应该在您的应用程序中造成任何问题。如果您使用
decodeURI或decodeURIComponent解码哈希 - 空格将被正确解码，因此应用程序的行为方式与%20相同。最坏的情况是
+字符没有被decodeURI解码回空格。I guess you run your test on Firefox. Modern versions of Firefox don't encode space character in hash url to
%20or+.You can do a simply test just by adding a hash with spaces to any url.
Other browsers will automaticaly convert space to
%20, but not modern Firefox. And there is nothing wrong about it and shouldn't make any problems in your app.If you decode the hash using
decodeURIordecodeURIComponent- the space will be decoded properly, so application will behave the same way like with%20.The worst case is
+character which is not decoded back to a space bydecodeURI.看看下面的帖子。它有一个测试表单，您可以在其中查看每个 Javascript 编码函数的输出：
http://www.the-art-of-web.com/javascript/escape/
对于技术也有很好的讨论。
干杯，
www.greyhound-computing.com
Take a look at the following post. It has a test form where you can see the output of each of the Javascript encode functions:
http://www.the-art-of-web.com/javascript/escape/
There is also a good discussion about the techniques as well.
Cheers,
www.greyhound-computing.com
地址栏显示未编码的字符这一事实并不意味着您的数据未正确编码。 Firefox（例如）可以并且将会尝试解码 url 地址中的字符，以使其更具人类可读性（我猜）。
即使您将手动输入一些编码字符，例如导航到：
地址栏中可见的 url 将被“解码” - 您将看不到 %20。
编辑：
要获得加号而不是%20，您可以在使用encodeURI 之前手动替换空格：
The fact that the address bar is showing the unencoded characters doesn't mean that your data isn't properly encoded. Firefox (for example), can and will try to decode characters in the url address, to make it more human readable (I guess).
Even if you will input some encoded characters by hand, for example navigate to:
The url visible in the address bar will be "decoded" - you won't see %20.
EDIT:
To get the plus sign instead of %20 you can manually replace spaces for those before using encodeURI: