当前位置：Gxlcms > JavaScript > jQuery实现base64前台加密解密功能详解

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

时间：2021-07-01 10:21:17 帮助过：8人阅读

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

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

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

（关于js的md5加密可以用jquery.md5.js，有兴趣可以找来测试一下）。

下面是测试：

  1. <html>
  2. <head>
  3.   <title></title>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.   <script language="javascript" src="jquery-1.7.1.js"></script>
  6.   <script language="javascript" src="jquery.base64.js"></script>
  7. </head>
  8. <body>
  9. <input id="path" name="path" type="hidden" value="haha"></input>
  10. <input id="putcardno01" name="putcardno01" type="text" size="65" value=""></input>
  11. <br>
  12. <input onclick="subfunc();" class="btn1" value="提交加密"  type="button"></input>
  13. <br>
  14. 加密后：<input id="putcardno02" name="putcardno02" type="text" size="65" value=""></input>
  15. <br>
  16. <input onclick="subfunc02();" class="btn1" value="提交解密"  type="button"></input>
  17. <br>
  18. <br>
  19. <hr>
  20. <input onclick="subfunc03();" class="btn1" value="提交N次加密"  type="button"></input>
  21. <br>
  22. 加密后：<input id="putcardno03" name="putcardno03" type="text" size="65" value=""></input>
  23. <br>
  24. <input onclick="subfunc04();" class="btn1" value="提交N次解密"  type="button"></input>
  25. <br>
  26. <br>
  27. <input onclick="clearrr();" class="btn1" value="清除"  type="button"></input>
  28. <br>
  29. <textarea id='txt' cols="75" rows="19"></textarea>
  30. </body>
  31. <script language="javascript">
  32. var path=document.getElementById("path").value;
  33. function app(info){
  34.   $("#txt").val($("#txt").val()+'\n'+info);
  35. }
  36. function subfunc(){
  37.  var put1=$.trim($("#putcardno01").val());
  38.  // var estxt=$.base64.encode(put1);
  39.  //var estxt=$.base64.btoa(put1);
  40.  var estxt=encodeBase64(put1);
  41.  $("#putcardno02").val(estxt);
  42.  app("加密后["+estxt+"]");
  43. }
  44. function subfunc02(){
  45.  var put1=$.trim($("#putcardno02").val());
  46.  //var estxt=$.base64.decode(put1);
  47.  //var estxt=$.base64.atob(put1);
  48.  var estxt=decodeBase64(put1);
  49.  app("解密后["+estxt+"]");
  50. }
  51. //////////////////////////////////////////
  52. var numTimes=5;
  53. function subfunc03(){
  54.  var put1=$.trim($("#putcardno01").val());
  55.  // var estxt=$.base64.encode(put1);
  56.  //var estxt=$.base64.btoa(put1);
  57.  //estxt=$.base64.btoa(estxt);
  58.  estxt=encodeBase64(put1,numTimes);
  59.  $("#putcardno03").val(estxt);
  60.  app(numTimes+"次加密后["+estxt+"]");
  61. }
  62. function subfunc04(){
  63.  var put1=$.trim($("#putcardno03").val());
  64.  //var estxt=$.base64.decode(put1);
  65.  //var estxt=$.base64.atob(put1);
  66.  //estxt=$.base64.atob(estxt);
  67.  estxt=decodeBase64(put1,numTimes);
  68.  app(numTimes+"次解密后["+estxt+"]");
  69. }
  70. function clearrr(){
  71.  $("#putcardno02").val("");
  72.  $("#putcardno03").val("");
  73.  $("#putcardno04").val("");
  74.  $("#txt").val("");
  75. }
  76. //加密方法。没有过滤首尾空格，即没有trim.
  77. //加密可以加密N次，对应解密N次就可以获取明文
  78. function encodeBase64(mingwen,times){
  79.   var code="";
  80.   var num=1;
  81.   if(typeof times=='undefined'||times==null||times==""){
  82.     num=1;
  83.   }else{
  84.     var vt=times+"";
  85.     num=parseInt(vt);
  86.   }
  87.   if(typeof mingwen=='undefined'||mingwen==null||mingwen==""){
  88.   }else{
  89.     $.base64.utf8encode = true;
  90.     code=mingwen;
  91.     for(var i=0;i<num;i++){
  92.       code=$.base64.btoa(code);
  93.     }
  94.   }
  95.   return code;
  96. }
  97. //解密方法。没有过滤首尾空格，即没有trim
  98. //加密可以加密N次，对应解密N次就可以获取明文
  99. function decodeBase64(mi,times){
  100.   var mingwen="";
  101.   var num=1;
  102.   if(typeof times=='undefined'||times==null||times==""){
  103.     num=1;
  104.   }else{
  105.     var vt=times+"";
  106.     num=parseInt(vt);
  107.   }
  108.   if(typeof mi=='undefined'||mi==null||mi==""){
  109.   }else{
  110.     $.base64.utf8encode = true;
  111.     mingwen=mi;
  112.     for(var i=0;i<num;i++){
  113.       mingwen=$.base64.atob(mingwen);
  114.     }
  115.   }
  116.   return mingwen;
  117. }
  118. /*
  119. 测试
  120. 输入 suolong2014version
  121. 加密后[c3VvbG9uZzIwMTR2ZXJzaW9u]
  122. 解密后[suolong2014version]
  123. 5次加密后[VjFod1QxWXlVblJUYTJoUVYwWmFhRnBYZEhOTk1WSlhWV3hPVG1KSVFscFZNalYzWVVaYU5tSkVSVDA9]
  124. 5次解密后[suolong2014version]
  125. */
  126. </script>

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

我们测试一下：

  1. package com.code;
  2. import sun.misc.BASE64Decoder;
  3. import sun.misc.BASE64Encoder;
  4. /**
  5.  *
  6.  * Base64加密--解密
  7.  *
  8.  * @author lushuaiyin
  9.  *
  10.  */
  11. public class Base64Util {
  12.   /**
  13.    * @param args
  14.    */
  15.   public static void main(String[] args) {
  16.     // TODO Auto-generated method stub
  17.     String str="suolong2014version";
  18.     System.out.println("测试明文["+str+"]");
  19.     String basecode =Base64Util.encodeBase64(str);
  20.     System.out.println("加密后["+basecode+"]");
  21.     if(basecode!=null){
  22.       String res =Base64Util.decodeBase64(basecode);
  23.       System.out.println("解密后["+res+"]");
  24.     }
  25.     /////////////////////////////////////////
  26.     System.out.println("");
  27.     System.out.println("N次加密测试--------");
  28.     String basecodeN=Base64Util.encodeBase64(str, 2);
  29.     String resN=Base64Util.decodeBase64(basecodeN, 2);
  30.     String basecodeN3=Base64Util.encodeBase64(str, 5);
  31.     String resN3=Base64Util.decodeBase64(basecodeN3, 5);
  32.   }
  33.   //提供加密N次
  34.   public static String encodeBase64(String mingwen,int times){
  35.     int num=(times<=0)?1:times;
  36.     String code="";
  37.     if(mingwen==null||mingwen.equals("")){
  38.     }else{
  39.       code=mingwen;
  40.       for(int i=0;i<num;i++){
  41.         code=encodeBase64(code);
  42.       }
  43.       System.out.println("加密"+num+"次后["+code+"]");
  44.     }
  45.     return code;
  46.   }
  47.   //对应提供解密N次
  48.   public static String decodeBase64(String mi,int times){
  49.     int num=(times<=0)?1:times;
  50.     String mingwen="";
  51.     if(mi==null||mi.equals("")){
  52.     }else{
  53.       mingwen=mi;
  54.       for(int i=0;i<num;i++){
  55.         mingwen=decodeBase64(mingwen);
  56.       }
  57.       System.out.println("解密"+num+"次后["+mingwen+"]");
  58.     }
  59.     return mingwen;
  60.   }
  61.   ///////////////////////////////////////////////////////////////////
  62.   public static String encodeBase64(String mingwen){
  63.     String code="";
  64.     if(mingwen==null||mingwen.equals("")){
  65.     }else{
  66.       BASE64Encoder encoder = new BASE64Encoder();
  67.       try {
  68.         code=encoder.encode(mingwen.getBytes());
  69.       } catch (Exception e) {
  70.         e.printStackTrace();
  71.       }
  72. //     System.out.println("加密后["+code+"]");
  73.     }
  74.     return code;
  75.   }
  76.   public static String decodeBase64(String mi){
  77.     String mingwen="";
  78.     if(mi==null||mi.equals("")){
  79.     }else{
  80.       BASE64Decoder decoder = new BASE64Decoder();
  81.       try {
  82.         byte[] by = decoder.decodeBuffer(mi);
  83.         mingwen = new String(by);
  84.       } catch (Exception e) {
  85.         e.printStackTrace();
  86.       }
  87. //     System.out.println("解密后["+mingwen+"]");
  88.     }
  89.     return mingwen;
  90.   }
  91. }
  92. /*
  93. 打印：
  94. 测试明文[suolong2014version]
  95. 加密后[c3VvbG9uZzIwMTR2ZXJzaW9u]
  96. 解密后[suolong2014version]
  97. N次加密测试--------
  98. 加密2次后[YzNWdmJHOXVaekl3TVRSMlpYSnphVzl1]
  99. 解密2次后[suolong2014version]
  100. 加密5次后[VjFod1QxWXlVblJUYTJoUVYwWmFhRnBYZEhOTk1WSlhWV3hPVG1KSVFscFZNalYzWVVaYU5tSkVS
  101. VDA9]
  102. 解密5次后[suolong2014version]
  103. */

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

PS：这里再推荐几款加密解密相关在线工具供大家参考使用：

线编码转换工具(utf-8/utf-32/Punycode/Base64)：
http://tools.jb51.net/transcoding/decode_encode_tool

BASE64编码解码工具：
http://tools.jb51.net/transcoding/base64

图片转换为Base64编码在线工具：
http://tools.jb51.net/transcoding/img2base64

在线MD5/hash/SHA-1/SHA-2/SHA-256/SHA-512/SHA-3/RIPEMD-160加密工具：
http://tools.jb51.net/password/hash_md5_sha

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！