前言

  前后端直接传输数据进行交互不就行了吗,为什么还要进行编码解码?正常情况下直接交互没问题,但当有类似以下情况出现时就需要进行编码再进行传输:

    1、编码格式难以统一,导致数据交互过程出现中文乱码等问题;

    2、进行HTTP GET请求,参数是跟在URl上面,当参数的值有“/”、“&”等特殊字符时,将导致程序报错;

    3、进行HTTP POST请求,参数放在请求体里自由穿梭在前、后端,但人在江湖飘哪有不挨刀,程序员总是要经历一些奇奇怪怪的bug才能变强变秃,比如最近我们项目就碰到一个奇怪的bug,两边的编码格式已经一致,前端发送的是英文、半角状态下的密码字符串(字符串里有个美元符号),后端接到的数据中,半角状态的美元符号变成了全角状态的“$”,其他的字符正常,导致后续业务操作出现问题,而这两个状态下的没有符号变化不是很大,乍一看没看出来,导致这个bug我们排查了好久才解决...

  本文记录多种常用的js、java编码解码方法

  常用方法

  

  URL编码解码

  java

/*
javaURL编码解码,需要引入这两个JDK自带net包里面的类
import java.net.URLDecoder;
import java.net.URLEncoder;
*/
//URL编码
String encode = URLEncoder.encode("HuanZi!#123.qch@qq.com/fdfd", "UTF-8");
System.out.println(encode);
//HuanZi%21%23123.qch%40qq.com%2Ffdfd
//URL解码
String decode = URLDecoder.decode(encode, "UTF-8");
System.out.println(decode);
//HuanZi!#123.qch@qq.com/fdfd

  js

/*
jsURL编码解码,我们使用encodeURIComponent、decodeURIComponent就可以了,它默认使用 UTF-8
*/
//URL编码
let encode = encodeURIComponent ("HuanZi!#123.qch@qq.com/fdfd");
console.log(encode);
//HuanZi!%23123.qch%40qq.com%2Ffdfd //URL解码
let decode = decodeURIComponent(encode);
console.log(decode);
//HuanZi!#123.qch@qq.com/fdfd

  Base64编码解码

  java

  需要先maven引入apache提供的Base64工具类

<!-- Base64编码需要  -->
<dependency>
<groupId>org.apache.directory.studio</groupId>
<artifactId>org.apache.commons.codec</artifactId>
<version>1.8</version>
</dependency>
/*
javaBase64编码解码,需要引入
import org.apache.commons.codec.binary.Base64;
*/
//Base64编码
String encode1 = Base64.encodeBase64String("HuanZi!#123.qch@qq.com/fdfd".getBytes());
System.out.println(encode1);
//SHVhblppISMxMjMucWNoQHFxLmNvbS9mZGZk //Base64解码
String decode1 = new String(Base64.decodeBase64(encode1));
System.out.println(decode1);
//HuanZi!#123.qch@qq.com/fdfd

  js

  先创建Base64工具对象(参考MDN的Base64编码和解码思路之一:https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Solution_4_%E2%80%93_escaping_the_string_before_encoding_it

let Base64 = {
encode(str) {
// first we use encodeURIComponent to get percent-encoded UTF-8,
// then we convert the percent encodings into raw bytes which
// can be fed into btoa.
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
function toSolidBytes(match, p1) {
return String.fromCharCode('0x' + p1);
}));
},
decode(str) {
// Going backwards: from bytestream, to percent-encoding, to original string.
return decodeURIComponent(atob(str).split('').map(function (c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
}
};
/*
js Base64编码解码,需要先创建Base64工具对象
*/
//Base64编码
let encoded = Base64.encode("HuanZi!#123.qch@qq.com/fdfd");
console.log(encoded);
//SHVhblppISMxMjMucWNoQHFxLmNvbS9mZGZk //Base64解码
let decoded = Base64.decode(encoded);
console.log(decoded);
//HuanZi!#123.qch@qq.com/fdfd

  后记

  一定要保证前后端编码、解码一致,否则会造成一端编码,另一端解码失败的严重后果

  更多方法持续更新中...

常用的js、java编码解码方法的更多相关文章

  1. C#中Base64之编码,解码方法

    原文:C#中Base64之编码,解码方法 1.base64  to  string string strPath =  "aHR0cDovLzIwMy44MS4yOS40Njo1NTU3L1 ...

  2. 使用多字节字符集的跨平台(PC、Android、IOS、WP)编码/解码方法

    随着移动端的发展,跨平台已成为通讯架构设计的重要考虑因素,PC.Android.IOS.WP等跨多平台间的数据通讯,必然要解决字符编码/解码的问题. 多字节字符集MBCS不是跨平台的首选字符集,面向跨 ...

  3. 原来浏览器原生支持JS Base64编码解码 outside of the Latin1 range

    原来浏览器原生支持JS Base64编码解码 « 张鑫旭-鑫空间-鑫生活 https://www.zhangxinxu.com/wordpress/2018/08/js-base64-atob-bto ...

  4. java编码解码过程

    最近做项目的时候,有时会遇到中文乱码的问题,网上查询了很多资料,发现大多都是只讲解决方案,并没有讲到为什么要使用这种方案,这种方案的原理是什么? 最典型的就是连接数据库的URL,我们一般把它放到cla ...

  5. 签名、BOM头、编码、Windows记事本编码、java编码解码的那些事

    对于Windows记事本: ANSI :GB2312 java中应使用GBK解码 Unicode :有签名的UTF-16LE java中应使用UTF-16解码 Unicode big endian : ...

  6. linux shell实现 URL 编码/解码方法

    (1)编码的两种方法 # echo '手机' | tr -d '\n' | xxd -plain | sed 's/\(..\)/%\1/g' # echo '手机' |tr -d '\n' |od ...

  7. java编码解码乱码问题

    服务器设值(中文)到界面使用了两次编码: String pageJson=URLEncoder.encode(URLEncoder.encode(str,"GBK"), " ...

  8. 常用的js跳转页面方法实现汇总

    1.window.location.href方式 <script language="javascript" type="text/javascript" ...

  9. js实现编码,解码

    <p><script type="text/javascript">// <![CDATA[var decToHex = function(str) ...

随机推荐

  1. PyCharm2019 激活

    文章末尾补充几个激活码:网上收集 一.破解补丁激活优点:永久期限 缺点:需要修改配置文件和下载破解文件 1.下载破解文件点击链接 链接: https://pan.baidu.com/s/1T405JC ...

  2. vue 路由对象

    路由对象在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以下属性: 1.$rout ...

  3. IT兄弟连 HTML5教程 CSS3揭秘 小结及习题

    小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类 ...

  4. [Spring cloud 一步步实现广告系统] 10. 使用Ribbon 实现微服务调用

    在使用Ribbon调用广告投放系统API之前,我们需要先创建2个VO对象,AdPlanVO,AdPlanGetRequestVO. //数据请求对象 @Data @NoArgsConstructor ...

  5. C#-Excel导入工资条群发邮箱

    第一次写随笔,一名在实习的程序猿,做的一个小应用,需要的朋友可以参考参考, 使用WinForm实现了一个导入Excel,群发工资条的功能.功能已经实现,还不够完善,. 大致运用了OleDbConnec ...

  6. Selenium(十三):验证码的处理、WebDriver原理

    1. 验证码的处理 对于Web应用来说,大部分的系统在用户登录时都要求用户输入验证码.验证码的类型很多,有字母数字的.有汉字的,甚至还需要用户输入一道算术题的答案的.对于系统来说,使用验证码可以有效地 ...

  7. 原生js对cookie的增删改查

    一.增 document.cookie = cname + "=" + cvalue + ";expires=" + expires + ";path ...

  8. [browser navigator],写了个检测游览器版本

    前些天胃不舒服打吊针了,真得准时吃饭各种啊,然后就是懒,就没在复习了,这次复习的内容是navigator //未知效果 // console.log('浏览器的次要版本' + navigator.ap ...

  9. Cesium专栏-空间分析之地形等高线(附源码下载)

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  10. OC深浅复制

    浅复制:指针的复制 深复制:内容的复制 主要有两个关键字  copy 和mutablecopy 对于基本类型 判断深浅方法 1.只要=右边从创建到赋值,至少包含一个NSMutable便会重新生成一个对 ...