利用js可以对前台数据加密,以防止被恶意获取,以下代码,用base64对数据进行加密,可以在后台进行解密。

引入的js

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.base64.js"></script>

  

html中的数据

 姓名:<input type="text" id="name"  ><br/>
密码:<input type="password" id="password" ><br/>
<button onclick="submitData()">提交</button>

js处理

<script>
function submitData(){ var obj = new Object();
obj.name = $('#name').val();
obj.password= $('#password').val(); //转换为json之后加密
var str = $.base64.encode(JSON.stringify(obj)); $.post("你的url地址",
{
data: str
},
function(data){
console.log(data);
});
} //扩展base64,支持中文
jQuery.base64 = (function($) { // private property
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; // private method for UTF-8 encoding
function utf8Encode(string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
} function encode(input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = utf8Encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
keyStr.charAt(enc1) + keyStr.charAt(enc2) +
keyStr.charAt(enc3) + keyStr.charAt(enc4);
}
return output;
} return {
encode: function (str) {
return encode(str);
}
}; }(jQuery)); </script>

使用js对form表单base64加密的更多相关文章

  1. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  2. JS 提交form表单

    源码实例一:javascript 页面加裁时自动提交表单Form表单:<form method="post" id="myform" action=&qu ...

  3. js重置form表单

      CreateTime--2017年7月19日10:37:11Author:Marydon js重置form表单 需要使用的方法:reset() 示例: HTML部分 <form id=&qu ...

  4. js验证form表单示例

    js验证form表单示例 检测测试了js表单验证,无jQuery(简单的功能有时无需jQuery版本) js代码如下:   <script type="text/javascript& ...

  5. 第十七篇 JS验证form表单

    JS验证form表单   这节课做一个实际的,项目里会遇到的东西,例如登录页面,我们输入‘用户名’和‘密码’或者‘手机号’还有‘验证码’等等,它都会做一个前端验证,比如验证码,是6位有效数字组成,那么 ...

  6. js阻止form表单重复提交

    防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单 ...

  7. 参数传递的四种形式----- URL,超链接,js,form表单

    什么时候用GET,  查,删, 什么时候用POST,增,改  (特列:登陆用Post,因为不能让用户名和密码显示在URL上) 4种get传参方式 <html xmlns="http:/ ...

  8. 纯js将form表单的数据封装成json 以便于ajax发送

    使用方式: var json = form2Json("formId");//这里的参数是form表单的id值 form2json.js function form2Json(fo ...

  9. js之form表单的获取

    js中获取form的方法: 1. 利用表单在文档中的索引或表单的name属性来引用表单 document.forms[i] //得到页面中的第i个表单 document.forms[formName] ...

随机推荐

  1. 七、Spring Boot Servlet 使用

    Web开发使用 Controller 基本上可以完成大部分需求,但是我们还可能会用到 Servlet.Filter.Listener.Interceptor 等等. 当使用spring-Boot时,嵌 ...

  2. check the manual that corresponds to your MySQL server version for the right syntax处理方案

    check the manual that corresponds to your MySQL server version for the right syntax:代码出现这样的bug,就要注意你 ...

  3. 仔细讲解socket(转载https://www.zybuluo.com/phper/note/47110)

    老实讲,到目前为止,我对socket一无所知,真的.我就现学现卖用过nodejs平台的socket.io搭建过一套高可用实时性的网页聊天系统,其他,就真的只是听过它. 今天就来仔仔细细的学一下,soc ...

  4. 小白的Python之路 day4 生成器

    一.列表生成式  看下面例子: 列表生成式的作用:主要是让代码更简洁(还有装X的效果) 二.生成器 通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.而且,创建一个包 ...

  5. 用keras作CNN卷积网络书本分类(书本、非书本)

    本文介绍如何使用keras作图片分类(2分类与多分类,其实就一个参数的区别...呵呵) 先来看看解决的问题:从一堆图片中分出是不是书本,也就是最终给图片标签上:“书本“.“非书本”,简单吧. 先来看看 ...

  6. 视觉SLAM中相机详解

    视觉SLAM中,通常是指使用相机来解决定位和建图问题. SLAM中使用的相机往往更加简单,不携带昂贵的镜头,以一定的速率拍摄周围的环境,形成一个连续的视频流. 相机分类: 单目相机:只是用一个摄像头进 ...

  7. Anaconda系统中管理程序包(Package)

    列出所有已安装的程序包 conda list 在已安装的程序包中查找某个特定的程序包 conda search package-name 安装程序包 conda install beautiful-s ...

  8. CentOS下 elasticsearch集群安装

    1.进入root目录并下载elasticsearch cd /root wget https://download.elastic.co/elasticsearch/elasticsearch/ela ...

  9. 有关opacity或RGBA设置颜色值及元素的透明值

    opacity声明来设置元素的透明值,当opacity设置元素的透明值,内部的文字及元素也会透明,通过RGBA设置的颜色值只针对当前元素,内部的文字及元素的透明值并未发生变化   opacity声明来 ...

  10. Ajax 原生和jQuery的ajax用法

    https://www.cnblogs.com/jach/p/5709175.html form数据的序列化: $('#submit').click(function(){ $('#form').se ...