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>
在IE
下运行,发现能够正常接收参数,结果如下图:
在Chrome
下运行,发现能够正常接收参数,结果如下图:
在Firefox
下运行,发现能够正常接收参数,结果如下图: