jQuery实现base64前台加密解密功能详解


Posted in jQuery onAugust 29, 2017

本文实例讲述了jQuery实现base64前台加密解密功能。分享给大家供大家参考,具体如下:

关于加密,很多人想到encodeURI和escape。这个对加密url,尤其是带中文参数的url很有用。

如果只是想做加密解密,类似于Java的DES,网上jQuery有个jquery.base64.js。

(关于js的md5加密可以用jquery.md5.js,有兴趣可以找来测试一下)。

下面是测试:

<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script language="javascript" src="jquery-1.7.1.js"></script>
  <script language="javascript" src="jquery.base64.js"></script>
</head>
<body>
<input id="path" name="path" type="hidden" value="haha"></input>
<input id="putcardno01" name="putcardno01" type="text" size="65" value=""></input>
<br>
<input onclick="subfunc();" class="btn1" value="提交加密"  type="button"></input>
<br>
加密后:<input id="putcardno02" name="putcardno02" type="text" size="65" value=""></input>
<br>
<input onclick="subfunc02();" class="btn1" value="提交解密"  type="button"></input>
<br>
<br>
<hr>
<input onclick="subfunc03();" class="btn1" value="提交N次加密"  type="button"></input>
<br>
加密后:<input id="putcardno03" name="putcardno03" type="text" size="65" value=""></input>
<br>
<input onclick="subfunc04();" class="btn1" value="提交N次解密"  type="button"></input>
<br>
<br>
<input onclick="clearrr();" class="btn1" value="清除"  type="button"></input>
<br>
<textarea id='txt' cols="75" rows="19"></textarea>
</body>
<script language="javascript">
var path=document.getElementById("path").value;
function app(info){
  $("#txt").val($("#txt").val()+'\n'+info);
}
function subfunc(){
 var put1=$.trim($("#putcardno01").val());
 // var estxt=$.base64.encode(put1);
 //var estxt=$.base64.btoa(put1);
 var estxt=encodeBase64(put1);
 $("#putcardno02").val(estxt);
 app("加密后["+estxt+"]");
}
function subfunc02(){
 var put1=$.trim($("#putcardno02").val());
 //var estxt=$.base64.decode(put1);
 //var estxt=$.base64.atob(put1);
 var estxt=decodeBase64(put1);
 app("解密后["+estxt+"]");
}
//////////////////////////////////////////
var numTimes=5;
function subfunc03(){
 var put1=$.trim($("#putcardno01").val());
 // var estxt=$.base64.encode(put1);
 //var estxt=$.base64.btoa(put1);
 //estxt=$.base64.btoa(estxt);
 estxt=encodeBase64(put1,numTimes);
 $("#putcardno03").val(estxt);
 app(numTimes+"次加密后["+estxt+"]");
}
function subfunc04(){
 var put1=$.trim($("#putcardno03").val());
 //var estxt=$.base64.decode(put1);
 //var estxt=$.base64.atob(put1);
 //estxt=$.base64.atob(estxt);
 estxt=decodeBase64(put1,numTimes);
 app(numTimes+"次解密后["+estxt+"]");
}
function clearrr(){
 $("#putcardno02").val("");
 $("#putcardno03").val("");
 $("#putcardno04").val("");
 $("#txt").val("");
}
//加密方法。没有过滤首尾空格,即没有trim.
//加密可以加密N次,对应解密N次就可以获取明文
function encodeBase64(mingwen,times){
  var code="";
  var num=1;
  if(typeof times=='undefined'||times==null||times==""){
    num=1;
  }else{
    var vt=times+"";
    num=parseInt(vt);
  }
  if(typeof mingwen=='undefined'||mingwen==null||mingwen==""){
  }else{
    $.base64.utf8encode = true;
    code=mingwen;
    for(var i=0;i<num;i++){
      code=$.base64.btoa(code);
    }
  }
  return code;
}
//解密方法。没有过滤首尾空格,即没有trim
//加密可以加密N次,对应解密N次就可以获取明文
function decodeBase64(mi,times){
  var mingwen="";
  var num=1;
  if(typeof times=='undefined'||times==null||times==""){
    num=1;
  }else{
    var vt=times+"";
    num=parseInt(vt);
  }
  if(typeof mi=='undefined'||mi==null||mi==""){
  }else{
    $.base64.utf8encode = true;
    mingwen=mi;
    for(var i=0;i<num;i++){
      mingwen=$.base64.atob(mingwen);
    }
  }
  return mingwen;
}
/*
测试
输入 suolong2014version
加密后[c3VvbG9uZzIwMTR2ZXJzaW9u]
解密后[suolong2014version]
5次加密后[VjFod1QxWXlVblJUYTJoUVYwWmFhRnBYZEhOTk1WSlhWV3hPVG1KSVFscFZNalYzWVVaYU5tSkVSVDA9]
5次解密后[suolong2014version]
*/
</script>

在后台加密解密是不是和前台一样?

我们测试一下:

package com.code;
import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;
/**
 *
 * Base64加密--解密
 *
 * @author lushuaiyin
 *
 */
public class Base64Util {
  /**
   * @param args
   */
  public static void main(String[] args) {
    // TODO Auto-generated method stub
    String str="suolong2014version";
    System.out.println("测试明文["+str+"]");
    String basecode =Base64Util.encodeBase64(str);
    System.out.println("加密后["+basecode+"]");
    if(basecode!=null){
      String res =Base64Util.decodeBase64(basecode);
      System.out.println("解密后["+res+"]");
    }
    /////////////////////////////////////////
    System.out.println("");
    System.out.println("N次加密测试--------");
    String basecodeN=Base64Util.encodeBase64(str, 2);
    String resN=Base64Util.decodeBase64(basecodeN, 2);
    String basecodeN3=Base64Util.encodeBase64(str, 5);
    String resN3=Base64Util.decodeBase64(basecodeN3, 5);
  }
  //提供加密N次
  public static String encodeBase64(String mingwen,int times){
    int num=(times<=0)?1:times;
    String code="";
    if(mingwen==null||mingwen.equals("")){
    }else{
      code=mingwen;
      for(int i=0;i<num;i++){
        code=encodeBase64(code);
      }
      System.out.println("加密"+num+"次后["+code+"]");
    }
    return code;
  }
  //对应提供解密N次
  public static String decodeBase64(String mi,int times){
    int num=(times<=0)?1:times;
    String mingwen="";
    if(mi==null||mi.equals("")){
    }else{
      mingwen=mi;
      for(int i=0;i<num;i++){
        mingwen=decodeBase64(mingwen);
      }
      System.out.println("解密"+num+"次后["+mingwen+"]");
    }
    return mingwen;
  }
  ///////////////////////////////////////////////////////////////////
  public static String encodeBase64(String mingwen){
    String code="";
    if(mingwen==null||mingwen.equals("")){
    }else{
      BASE64Encoder encoder = new BASE64Encoder();
      try {
        code=encoder.encode(mingwen.getBytes());
      } catch (Exception e) {
        e.printStackTrace();
      }
//     System.out.println("加密后["+code+"]");
    }
    return code;
  }
  public static String decodeBase64(String mi){
    String mingwen="";
    if(mi==null||mi.equals("")){
    }else{
      BASE64Decoder decoder = new BASE64Decoder();
      try {
        byte[] by = decoder.decodeBuffer(mi);
        mingwen = new String(by);
      } catch (Exception e) {
        e.printStackTrace();
      }
//     System.out.println("解密后["+mingwen+"]");
    }
    return mingwen;
  }
}
/*
打印:
测试明文[suolong2014version]
加密后[c3VvbG9uZzIwMTR2ZXJzaW9u]
解密后[suolong2014version]
N次加密测试--------
加密2次后[YzNWdmJHOXVaekl3TVRSMlpYSnphVzl1]
解密2次后[suolong2014version]
加密5次后[VjFod1QxWXlVblJUYTJoUVYwWmFhRnBYZEhOTk1WSlhWV3hPVG1KSVFscFZNalYzWVVaYU5tSkVS
VDA9]
解密5次后[suolong2014version]
*/

从结果上看,jquery.base64.js加密解密和java的base64加密解密是一样的。

jQuery 相关文章推荐
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 #jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 #jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 #jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 #jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 #jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 #jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 #jQuery
You might like
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python生成式的send()方法(详解)
2017/05/08 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
给实习单位的感谢信
2014/02/01 职场文书
语文教学感言
2014/02/06 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
购房协议书
2014/04/11 职场文书
项目备案申请报告
2015/05/15 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书