利用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. shell脚本小案例

    1.获取远程ftp数据到本地目录 #!/bin/bash ftp -n<<! open 135.0.24.19 user exchange exchange binary cd /idep ...

  2. 大数据学习(4)MapReduce编程Helloworld:WordCount

    Maven依赖: <dependency> <groupId>jdk.tools</groupId> <artifactId>jdk.tools< ...

  3. MPSOC之8——启动及错误处理

    有了BOOT.BIN(fsbl+pmu+atl+uboot).uImage.uramdisk.image.gz,dtb文件,就可以启动了.把上述文件统统拷贝到SD卡,并设置开发板为SD卡启动. 0. ...

  4. ViewPager+Fragment 懒加载

    转载于: 作者:尹star链接:http://www.jianshu.com/p/c5d29a0c3f4c來源:简书   ViewPager+Fragment的模式再常见不过了,以国民应用微信为例,假 ...

  5. C#:MVC引用Log4Net生成错误日志

    第一步:引用log4net配置文件 第二步:在自己项目下新建文件夹LogNet,再在里面建立类Log.cs log.cs内容如下: 第三步:在自己项目下新建Log4Net.config Log4Net ...

  6. XSS注入,js脚本注入后台

    曾经一度流行sql注入,由于现在技术的更新,已经看不到这问题了,但是又出来新的安全问题,XSS攻击,他的原理就是在前端提交表单的时候,在input标签当中输入js脚本,通过js脚本注入后台,请看下图. ...

  7. iOS实现类似QQ的好友列表,自由展开折叠(在原来TableView的基础上添加一个字典,一个Button)

    //直接代码 只包含 折叠展开字典的处理搭建#import "CFViewController.h" @interface CFViewController ()<UITab ...

  8. echarts中如何使用timeline组件

    1.吃碗面 这里关于echarts3 官网的示例我不得不吐槽一下,逼格真高!一小部分示例动不动数据就是国家统计局搞出来的,你脸真大.当然他们做的示例的确是很好,这一点毫无疑问.当我看了echarts3 ...

  9. php-递归创建级联目录

    方法一: function mk_dir($path_arr,$root){ if(!empty($path_arr)){ static $path;//每次保存上次调用的值 $path .= '/' ...

  10. KVM(二):KVM应用

    ++++++++++++++++++++++++++++++创建和拍摄快照++++++++++++++++++++++++++++++++++ KVM快照方法常用的是qemu-img snapshot ...