Question

我有一个搜索输入框，我将其数据附加到“＃”之后的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>

Answer 1

地址栏显示未编码的字符这一事实并不意味着您的数据未正确编码。 Firefox（例如），可以并且将尝试解码url地址中的字符，使其更具人性化（我猜）。

即使您手动输入一些编码字符，例如导航到：

http://google.com?opt=test%20me%20or%20not

地址栏中显示的网址将被“解码” - 您将看不到％20。

编辑：要获得加号而不是％20，您可以在使用encodeURI之前手动替换空格：

var url = encodeURI("pqr xyz".replace(/\s/, '+'));

Answer 2

看看以下帖子。它有一个测试表单，您可以在其中查看每个Javascript编码函数的输出：

http://www.the-art-of-web.com/javascript/escape/

关于这些技术也有很好的讨论。

干杯，

www.greyhound-computing.com

Answer 3

我猜你在Firefox上运行测试。现代版Firefox不会将哈希网址中的空格字符编码为%20或+。

您可以通过向任何网址添加带空格的哈希来进行简单的测试。

其他浏览器会自动将空间转换为%20，但不会转换为现代Firefox。它没有任何问题，不应该在您的应用程序中出现任何问题。

如果使用decodeURI或decodeURIComponent解码哈希值 - 空间将被正确解码，因此应用程序的行为方式与%20相同。

最糟糕的情况是+字符，它不会被decodeURI解码回空格。

如何使用javascript将编码参数附加到网址？

3 个答案: