URI编码乱码

这次的需求是优惠券管理页支持多条件查询，之前一直都是单个条件查询。
做完后如果有多页，跳转指定页时如果当前搜索条件是包含中文的话会乱码，跳转后搜索不到内容
这里写图片描述

通过分析，发现跳转页面的链接是get方式，拼接如下：

#set($pageModule=$!homeModule.getTarget("/couponList.html").addQueryData("couponCode",$!query.couponCode).addQueryData("couponState",$!query.couponState).addQueryData("couponName",$!query.couponName)

而搜索框的方式是Post方式
get方式在传入后端的时候会进行uri编码，而post不会（如果错误，请留言，万分感谢）

第一种解决方案是：
在服务器进行一次解码：

if(StringUtils.isNotEmpty(couponName)){
couponName=URLDecoder.decode(couponName,"UTF-8");
query.setCouponName(couponName);
}

解码后进行数据的处理，在回传到前端时重新编码

if(StringUtils.isNotEmpty(query.getCouponName())){
Stringname=URLEncoder.encode(query.getCouponName(),"UTF-8");
query.setCouponName(name);
}

前端解码：

varcouponName=$("#couponName").val();
if(couponName!=null&&couponName!=""){
jQuery("#couponName").val(decodeURIComponent(couponName));
}

流程如下：
这里写图片描述

保证每次处理之前字符串都能恢复utf-8编码（即图中的无编码状态）

注意，这种方案不支持字符串中带有特殊字符，如%
原因：
在使用post到服务器后台解码时，URLDecoder.decode不支持特殊字符的解码，会直接报错。

方案改进：
搜索条件post之前先将字符串编码一次，如%编码成%25，后台便可以正常解码成%

方案再改进：
为了编码一致，我们最好让搜索条件和页面跳转（比如第n页，首页，尾页）的方式一致，如都使用post或者get
于是最后改进让搜索条件的时候也使用get
这样只要让字符串get之前encode两次

var Name = encodeURIComponent(encodeURIComponent($("#Name").val()))

猜你喜欢