Js如何利用URL向后台传入中文参数乱码问题

我们经常会在前台请求以后后台对应URL时，在URL中利用此URL向后台传递参数，但如果参数为中文会存在乱码问题。下面我们考虑一个场景来详细说明URL传递参数时的乱码解决之道。

假设我们页面中拥有一个输入框、一个提交按钮，当我们点击提交按钮时获取输入框中用户输入的值，然后利用URL传递参数的方式，将输入框的值传递到后台。我们假设后台对应web层处理技术使用Struts2的Action进行数据处理，假设Action中处理数据的URL为/say。具体页面急请求Action代码如下：

html代码：

<input type="text" id="name" name="name" value="${user.name}" />
<button id="sub" onclick="sub()">提交</button>
javascript代码：
<script type="text/javascript">
function sub(){
var name = document.getElementById("name").value;①
 window.location = "sayHello?user.name=" + name;②
}
</script>

以上代码首先从id为name的输入框中取得输入框的值，然后利用window.localtion请求URL为sayHello的Action，在此action后面利用key=value这样的格式，传入的参数，并根据Struts2的机制利用传入的输入框中的值，更新了后台User实体的name属性。

URL编码及解码原理：

由于我们利用URL传递参数这种方式是依赖与浏览器环境中的，也就是说URL及URL中包含的各个key=value格式的传递参数键值对参数是在浏览器地址栏中的处理原理处理相应编码后传递至后台进行解码的。

由于我们没有进行任何处理，此时javascript请求URL并传参数存在中文时（也就是说输入框中输入中文时），对URL的中文参数进行编码是按照浏览器机制进行编码的。此时编码存在乱码问题。

假设输入框中输入的内容为“测试”二字，后台Action接受到的参数值为乱码。javascript中利用encodeURI()方法进行编码。

1、利用encodeURI()在javascript中对中文URL参数进行编码时，“测试”二字会被转换为“%E6%B5%8B%E8%AF%95”

2、但是浏览器机制会认为“%”是一个转义字符，浏览器会把地址栏URL中的传递的已转换参数“%”与“%”之间的已转义字符进行处理传递到后台Action中。这样会造成与实际经过encodeURI()编码后的URL不符，因为浏览器误认为“%”是转义字符字符了，它并未将“%”认为是个普通字符。

3、要使得通过encodeURI()转换后的URL被浏览器正常处理，必须在外层再用encodeURI()处理一次已被encodeURI()编码后的RUL。这此处理encodeURI()会将已编码后的URL中被浏览器解析为转义字符的“%”再次进行编码，转换为普通字符。

4、正常处理后，前面javascript代码中②处代码为：

window.location = encodeURI(encodeURI("sayHello?user.name=" + name));

5、处理后的URL不在是通过一次 encodeURI()转换后的字符串”%E6%B5%8B%E8%AF%95“，而是经过上一步两层encodeURI()处理URL处理后的字符串”%25E6%B255%258B%25E8%AF%2595“，通过再次编码原有被浏览起解析为转义字符的”%“被再次编码，转换成了普通字符转”%25“。

此时前端javascript代码对带有中文的URL编码已经完成，并通过URL传递参数的方式传递到后台Action等待处理，Action获取到正常转换切无乱码的参数为”%25E6%B255%258B%25E8%AF%2595“，此字符串对应的中文正是我们输入的”测试“二字。

Action获取到这样的字符串无法进行处理，因为它并不是我们前端输入的源数据”测试“二字，而是进过两次encodeURI()编码后的字符串。于是我们需要利用后台的一个API对前端编码后的参数字符串进行解码，对应解码API是URLDecoder.decode(user.getName(),"UTF-8")。

URLDecoder的decode(String str,String ecn)方法有两个参数，第一个参数为待解码的字符串，第二个参数为解码时的对应编码。我么在后台使用此API进行解码的代码为：

URLDecoder.decode(user.getName(),"UTF-8");

总结：

此时我们完成了URL传入中文参数出现乱码的问题，总结步骤大致分为一下阶段：

1、在javascript中利用encodeURI()两次嵌套对URL中的中文参数进行编码

2、在后台获取到进过前端encodeURI()编码后的字符串，使用decode(String str,String ecn)方法进行解码

以上就是Js如何利用URL向后台传入中文参数乱码问题的详细内容，更多请关注其它相关文章！