新手base64前台加密

最新推荐文章于 2024-12-29 23:56:48 发布

韩哥123456

最新推荐文章于 2024-12-29 23:56:48 发布

阅读量742

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： base64 加密 ajax js

本文链接：https://blog.youkuaiyun.com/u014274324/article/details/24523723

web前端专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了前端开发中使用Ajax进行数据交互时的加密技术，包括使用base64进行数据加密的js代码实现，以及如何将加密后的数据通过Ajax发送至后台进行解密和处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于前台来说，储存用户注册的信息，当然不能以明文的方式写入数据库，这就用到了加密。

不废话，先贴我的前台js加密代码。

/*
*js的类名Encode.js
*基于base64的前台标准加密代码
*简单的写到js里，用的时候直接加载Encode.js类
*
*/
var base64encodechars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
var encode={

		base64encode:function(str) {

			var out, i, len;
			var c1, c2, c3;
			len = str.length;
			i = 0;
			out = "";
			while (i < len) {
				c1 = str.charCodeAt(i++) & 0xff;
				if (i == len) {
					out += base64encodechars.charAt(c1 >> 2);
					out += base64encodechars.charAt((c1 & 0x3) << 4);
					out += "==";
					break;
				}
				c2 = str.charCodeAt(i++);
				if (i == len) {
					out += base64encodechars.charAt(c1 >> 2);
					out += base64encodechars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4));
					out += base64encodechars.charAt((c2 & 0xf) << 2);
					out += "=";
					break;
				}
				c3 = str.charCodeAt(i++);
				out += base64encodechars.charAt(c1 >> 2);
				out += base64encodechars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4));
				out += base64encodechars.charAt(((c2 & 0xf) << 2) | ((c3 & 0xc0) >> 6));
				out += base64encodechars.charAt(c3 & 0x3f);
			}
			return out;
		},

		utf16to8:function(str) {			
			var out, i, len, c;
			out = "";
			len = str.length;
			for (i = 0; i < len; i++) {
				c = str.charCodeAt(i);
				if ((c >= 0x0001) && (c <= 0x007f)) {
					out += str.charAt(i);
				} else if (c > 0x07ff) {
					out += String.fromCharCode(0xe0 | ((c >> 12) & 0x0f));
					out += String.fromCharCode(0x80 | ((c >> 6) & 0x3f));
					out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
				} else {
					out += String.fromCharCode(0xc0 | ((c >> 6) & 0x1f));

					out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
				}
			}
			return out;
		}
}

当然前后台数据交互用到了ajax，下面是ajax的js代码


/*
*js的类名Ajax.js
*用的时候直接加载Ajax.js
*参数大家根据需要自己增删
*
*/
var DataDeal = {
		/*  功能          ：          处理数据
	     *  dbsrc :    用于扩展
	     *  id    :    总表 id,用于获取tableName,field等信息
	     *  dtobj :    从前台获取的json数据 
	     *  url   :    公共servlet的servlet
	     *  data  :    包含id和json数据
	     *  method:    在后台要调用的方法
	     *  return:    reobj--从dervlet返回的数据
	     *  ****************        
	     * */
	    dealData: function (dbsrc,id, dtobj, method,succFunc) {
	         	var vsJsonData="";
	    	    vsJsonData= { "id": id, "dataJson": dtobj ,"method":method};
		        var reobj;
		        $.ajax({
		            url: '../servlet/CommonServlet',
		            type: "post",
		            data: vsJsonData,
		            dataType: "json",
		            async: false,
		            success:
		        function (reval) {
		            if (typeof (succFunc) == 'function') {
		                succFunc(reval);
		            }
		            else {
		                reobj = reval;
		            }

下面就来发一下我ajax前后台数据交互的加密代码。

/*
*
*loginForm为我的Form的id
*name为用户名
*password为密码
*value为输入值
*
*/
DataDeal.dealData(
	null,
	"1",
	"{\"name\":\""
	+ loginForm.name.value
	+ "\",\"password\":\""
	+ encode.base64encode(encode.utf16to8(loginForm.password.value))
	+ "\"}",
	"add",
	function(data) {
	loginDialog.dialog('close');
	alert(data.msg);
	},
	function() {
		alert(data.msg);
	}
);

大家如果还有什么疑问，可以直接回复我，我一定最快答复你。