解决URL传值包含中文时乱码的问题

本文介绍了解决网页URL中中文参数在不同浏览器下出现乱码的方法。通过使用decodeURIComponent进行URL解码，确保了在IE、Chrome和Firefox等浏览器上都能正确解析中文参数。

1、前言

很多时候我们需要利用URL进行传值，当其中的参数值为中文时，接收端可能会产生乱码问题，下面就来说明一下如何解决这个问题。

2、接收URL参数值

定义index.html，添加一个按钮，点击该按钮后跳转到main.html，代码如下：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>index</title>
</head>
<body>
    <button id="btn">跳转</button>
    <script>
        document.getElementById('btn').onclick = function () {
            window.location.href = 'main.html?Name=张三';
        }
    </script>
</body>
</html>

main.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>main</title>
</head>
<body>
    <script>
        var href = window.location.href;
        var name = href.split('?')[1].split('=')[1];
        window.alert(name);
    </script>
</body>
</html>

在IE下运行，发现能够正常接收参数，结果如下图：

在这里插入图片描述
在Chrome下运行，发现参数乱码，结果如下图：

在这里插入图片描述
在Firefox下运行，发现参数乱码，结果如下图：

在这里插入图片描述

3、URL解码

导致上面问题的主要原因是：Chrome和Firefox会对中文进行编码，解决方法也很简单：对URL解码即可，修改一下main.html的代码，使用decodeURIComponent方法对URL进行解码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>main</title>
</head>
<body>
    <script>
        var href = decodeURIComponent(window.location.href);
        var name = href.split('?')[1].split('=')[1];
        window.alert(name);
    </script>
</body>
</html>