第十三、十四个知识点：用javascript获取表单的内容并加密
我们先来写一段代码：
<body>
<form action="#" method="post">//写一个表单
<span>用户名：</span><input type="text" id="username" name="username">
<span>密码：</span><input type="password" id="password" name="password">
<button type="submit" onclick="A()">提交</button> //onclick---点击调用函数提交
</form>
<script>
function A(){//用js获取用户名，密码，说明不加密之前账号容易泄露
//获取用户名节点
var user = document.getElementById('username');
//获取密码节点
var pass = document.getElementById('password');
console.log(user.value);//在控制台输出用户名的值，方便观察
console.log(pass.value);//在控制台输出密码的值，方便观察
pass.value = 'abc';
return true;
}
</script>
</body>然后我们来说说，在提交了表单以后，我们可以在浏览器-->网络-->负载 里面去看自己传入的username、password（各个浏览器观察的位置不一样）
由此我们可以知道这样写代码是不具备安全性的
所以接下来我们用md5加密秘密
这里我们需要引入一个别人写好的js文件，用这个文件来给密码加密：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>//别人的md5.js
</head>
<body>
<form action="#" method="post">
<span>用户名：</span><input type="text" id="username" name="username">
<span>密码：</span><input type="password" id="password" name="password">
<button type="submit" onclick="A()">提交</button>
</form>
<script>
function A(){
var count = document.getElementById('username');
var pwd = document.getElementById('password');
pwd.value = md5(pwd.value);//调用md5方法执行加密
console.log(pwd.value);
}
</script>
</body>
然而这样加密别人依旧可以通过一些操作获取你的密码，于是乎现在我们再介绍一种更有效保密的方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//使用别人的md5.js
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
//将onclick变为onsubmit，将绑定按钮变为绑定表单
<form action="#" method="post" onsubmit="return A()">
<span>用户名：</span><input type="text" id="username" name="username">
<span>密码：</span><input type="password" id="password">
<input type="hidden" name="password" id="md5pwd">
<button type="submit">提交</button>
</form>
<script>
function A(){
var count = document.getElementById('username');
var pwd = document.getElementById('password');
var md5pwd = document.getElementById('md5pwd');
//相当于把pwd视为密码地中转站，md5pwd才是重点，这样更加安全
md5pwd.value = md5(pwd.value);
return true;//用于判断，在后续判断密码是否正确有用
}
</script>
</body>
</html>