小笔记：02-jquery-将url作为参数传递给后端，需要进行的特殊处理

// 进行转码的url
var realGoUrl="${webRoot}/general/interceptor.do?url="+goUrl+"?serviceId="+serviceItem+"&clientNo="+clientNo+"&taskId="+taskId+"&phone="+phone+"&serviceObject="+serviceObject+"&activityId="+activityId+"&clientName="+clientName+"&empOrderClientNo="+empOrderClientNo+"&empPolicyNo="+empPolicyNo+"&callId="+callId+"&policyNo="+policyNo;

// 替换链接中的serviceId，将【购买意向线索对接id】改为【一般呼入工单id】,并进行特殊字符替换，防止后端将此作为多个参数
realGoUrl = realGoUrl.substring(0, 88) + "210004" + realGoUrl.substring(88 + 6);
// realGoUrl = realGoUrl.replace(/&/g, "~");
// realGoUrl = realGoUrl.replace(/=/g, "@");
// 上面的替换方法测试可行，但貌似不太优雅
realGoUrl = encodeURIComponent(encodeURIComponent($.trim(realGoUrl)));
// 将下面的参数传给后端
var param = "phone=" + phone + "&taskId=" + taskId + "&serviceId=" + serviceItem +"&realGoUrl=" + realGoUrl;
                
                
// 解决前端中文字符传入后端，但后端会丢失的问题
desc = encodeURIComponent(encodeURIComponent($.trim(desc)));

// realGoUrl = realGoUrl.replace(/~/g, "&");
// realGoUrl = realGoUrl.replace(/@/g, "=");
// 上面进行转码后，此处要进行解码
realGoUrl = decodeURIComponent(realGoUrl);
realGoUrl = realGoUrl + "&desc=" + desc;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

如图，我定义了四个desc

    function getEncode64(str){
        // 对字符串进行编码
        var encode = encodeURI(str);
        // 对编码的字符串转化base64
        return btoa(encode);
    }

    //字符串转base64
    function getEncode64Pro(str){
        return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
            function toSolidBytes(match, p1) {
                return String.fromCharCode('0x' + p1);
            }));
    }

    // 不符合推送结果，转至一般呼入工单
    function submitTransfer(realGoUrl, serviceSeq, desc) {

        var serviceItemDesc = "一般呼入工单";
        var serviceItem = "210004";
        var serviceItemName = "寿险工单-一般呼入工单";
        var clientNo = $("#currClientNo").val();
        var taskId = document.getElementById("taskId").value;
        // 解决前端中文字符传入后端，但后端会丢失的问题
        var desc1 = encodeURIComponent(encodeURIComponent($.trim(desc)));
        var desc2 = encodeURI(encodeURI($.trim(desc)));
        var desc3 = getEncode64($.trim(desc));
        var desc4 = getEncode64Pro($.trim(desc));


        // 将url解码
        realGoUrl = decodeURIComponent(realGoUrl);
        realGoUrl = realGoUrl + "&desc=" + desc1 +"&desc2=" + desc2 +"&desc3=" +desc3 +"&desc4=" +desc4;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

正常情况下，desc1、2、3均可实现传入到后台汉字正常显示，
或者Tomcat配置了

<Connector port="8080" protocol="HTTP/1.1" 
               connectionTimeout="20000" 
               redirectPort="8443" 
			   URIEncoding="UTF-8"			   />
1
2
3
4

但本次比较特殊，Tomcat没有配置utf-8，于是测试环境汉字一直无法正常显示，变成了问号，desc1与desc2方法均行不通。于是我想到了使用base64编码的形式，即使后天接收到的参数是一段编码，但是到页面自行解码即可，至少能正常显示，附上这几个的代码。

        // 客户诉求(购买意向线索对接失败才有此参数)
        String desc = this.getRequest().getParameter("desc");
        System.out.println("desc:" + desc);
        LOG.info("desc:" + desc);

        String desc2 = null;
        try {
            desc2 = decode(this.getRequest().getParameter("desc2"), "UTF-8");
        } catch ( UnsupportedEncodingException e ) {
            LOG.error("desc2:" + desc2, e);
        }
        System.out.println("desc2:" + desc2);
        LOG.info("desc2:" + desc2);
        model.put("desc2", desc2); // 工单内容

        String desc3 = this.getRequest().getParameter("desc3");
        System.out.println("desc3:" + desc3);
        LOG.info("desc3:" + desc3);
        model.put("desc3", desc3); // 工单内容

        String desc4 = this.getRequest().getParameter("desc4");
        System.out.println("desc4:" + desc4);
        LOG.info("desc4:" + desc4);
        model.put("desc4", desc4); // 工单内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

前端页面正常解码，目前页面模板引擎使用freemark

<script type="text/javascript">
        	$(function(){
		       if(""=='${mccWorkorder.workorderId}'){
					alert("工单号为空，不能创建'工单'");
					frame.closeCurrent();
			   };

                // 给工单内容赋值
                var desc = "${desc}";
                alert("1" +desc);

                var desc2 = "${desc2}";
                alert("2"+desc2);
                $("#content2").text(desc2);

                var desc3 = getDecode("${desc3}");
                alert("3"+desc3);
                $("#content3").text(desc3);

                var content = "${mccWorkorder.content}";
                alert("c"+content);

                if (desc != '') {
                    $("#content").text(desc);
                } else {
                     $("#content1").text(content);
                }

                var desc4 = getDecodePro("${desc4}");
                alert("4"+desc4);
                $("#content4").text(desc4);
			})

            function getDecode(str){
                // 对base64转编码
                var decode = atob(str);
                // 编码转字符串
                return decodeURI(decode);
            }

            function getDecodePro(str){
                return decodeURIComponent(atob(str).split('').map(function (c) {
                    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
                }).join(''));
            }
     script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

附上日志

desc:来电号码：15622774048，
desc2:来电号码：15622774048，
desc3:JUU2JTlEJUE1JUU3JTk0JUI1JUU1JThGJUI3JUU3JUEwJTgxJUVGJUJDJTlBMTU2MjI3NzQwNDglRUYlQkMlOEM=
desc4:5p2l55S15Y 356CB77yaMTU2MjI3NzQwNDjvvIw=
desc:来电号码：15622774048，
desc2:来电号码：15622774048，
desc3:JUU2JTlEJUE1JUU3JTk0JUI1JUU1JThGJUI3JUU3JUEwJTgxJUVGJUJDJTlBMTU2MjI3NzQwNDglRUYlQkMlOEM=
desc4:5p2l55S15Y 356CB77yaMTU2MjI3NzQwNDjvvIw=
1
2
3
4
5
6
7
8

总结：只要不在乎后端接收的字符是啥形式，那么desc3应该是终极方案。

如果要实现对desc3在后端正常解码，而不是在前端才解码，则可以使用以下方式

    public static void main(String[] args) throws DecoderException, UnsupportedEncodingException {
    	// 前端desc3编码之后到后端的形式
        String text = "JUU2JTlEJUE1JUU3JTk0JUI1JUU1JThGJUI3JUU3JUEwJTgxJUVGJUJDJTlBMTM1NTc0MDA3NDglRUYlQkMlOEM=";
    
        // import org.apache.commons.codec.DecoderException;
        // import org.apache.commons.codec.binary.Base64;
        // import static java.net.URLDecoder.decode;
        Base64 base64 = new Base64();
        byte[] textByte = text.getBytes("UTF-8");
        String s = new String(base64.decode(textByte), "UTF-8");
        //解码
        System.out.println(s);
        System.out.println(decode(s,"UTF-8"));
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14