iframe跨域应用 - 使用iframe提交表单数据
iframe跨域应用 - 使用iframe提交表单数据
之前我们提到了iframe跨域，今天我们在原有的基础之上进行“实例”的讲解。通过iframe跨域实现表单数据的提交。如果想了解iframe跨域，可以发送“iframe跨域”到“HTML5学堂”公众号。
为何提交数据还要跨域？
在使用iframe跨域之前，可能你的脑海中就出现了这样一个问题：为何提交表单数据还需要跨域呢？
首先我们要知道，网站的数据是存放在服务器上的，而当一个网站很大型，拥有很多的数据时，通常会进行分类，然后将不同类的内容放置在不同的子域名中。
表单数据的提交模式
今天会使用到MD5的知识，因此我们先来解释一下这个概念，再进入到我们的实例当中。
出于安全方面的考虑，互联网使用了各类加密机制针对用户的信息进行加密处理。而MD5就是加密方式中的一种。
注册时：会获取到当前表单内容，之后进行MD5加密，最后再数据库中保存处理后的密码。即：
——> 表单中输入内容
——> MD5加密
——> 数据库存储
登录时：获取输入的内容，之后进行MD5加密，然后将加密后的内容与数据库中存储的内容进行比较。即：
——> 表单中输入内容
——> MD5加密
——> 比对数据库存储的密码
换言之，出于安全性考虑，在数据库中其实并不会存储我们原始密码，这些信息都经过了转码（MD5就是其中一种加密算法）。我们是通过比较“注册时转码后数据”和“登录时转码后数据”来确定是否成功登录。
另外，利利请教了一下HTML5学堂的好朋友“崔哥哥”，了解了一下MD5加密机制，在此提醒各位：请不要使用纯字母、纯数字或字母+数字的方式设置密码，这种密码设置通过MD5生成出来的密码都比较类似，最好的一种设置密码方式是：数字+字母+特殊字符。
虽然，工程师们会进行各种加密处理，也会考虑到预防密码破解的问题（如：使用MD5加密数据之后再次使用MD5加密，从而让结果变得更为复杂，提升密码的破解难度）。但是作为用户的我们，也尽可能的避免掉一些问题吧~
iframe提交表单数据
说完了前面的需要了解的东西，我们进入iframe的实例操作吧~！
功能需求
在http://A.h5course.com中，进行用户的注册（填写表单），需要将数据提交到http://B.h5course.com的addUser.php中。此时即是需要从A域发送数据到B域。
实现流程，在A域中的a.html创建iframe标签，iframe标签的内容是B域中的b.html，之后通过a.html控制b.html去申请B域中的addUser.php文件
功能实现的基本流程
1 构建基本的结构样式
2 引入需要依赖的JS文件
3 定义动态创建iframe标签的功能函数
4 获取表单数据并序列化、加密处理
5 通过AJAX发送请求，完成跨域
代码书写位置
我们依旧在A域当中进行代码书写
第一步 A域中的结构代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5学堂 A域中的a.html</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
<div class="wrap">
<form action="" name="postframe">
<label for="user">用户名：</label><input type="text" name="username" id="user"/>
<label for="pass">密码：</label><input type="password" name="password" id="pass"/>
<span>提交数据</span>
</form>
</div>
</body>
</html>第二步 引入需要依赖的JS文件
在开发层面来说，我们此处使用jQuery框架，另外由于需要进行密码加密，因此我们还需要引入md5.js
引入代码如下：
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/md5.js" type="text/javascript"></script>第三步 定义“动态创建iframe标签”的功能函数
JS代码如下（对于这个步骤中的详细介绍，我们之前的文章中已经做了详细的解释，想要了解的可以发送“iframe跨域”到“HTML5学堂”公众号）
var iframeJquery = null;
function addIframe(callback) {
var newIframe = '<iframe id="newframe" src="http://B.h5course.com/b.html" name="postframe" style="width:0; height:0;position:absolute;left:-9999px;top:0;" />';
document.domain = "h5course.com";
$('body').append(newIframe);
$('#newframe').on('load', function() {
iframeJquery = $('#newframe')[0].contentWindow.$;
callback && callback();
});
}第四步 获取表单数据并进行表单数据序列化
在点击按钮时，我们需要获取表单数据并进行表单数据序列化，之后对数据进行md5加密。具体代码如下：
$('.wrap span').click(function() {
// 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据
var userdata = $('form').serializeArray();
// 对密码进行md5加密
var passowrd = (userdata[1].value).MD5().toLowerCase();
// 将序列化后的密码修改为加密后的密码
userdata[1].value = passowrd;
});第五步 通过AJAX发送请求
当处理完成表单数据之后，我们需要将当前的数据通过AJAX，发送到B域当中的addUser.php当中，进行用户数据的存储。
注意：由于涉及到了密码等私密性信息，因此需要使用post的提交方法。
注意：当使用post进行数据提交时，并不能够通过url传递数据，所有需要传递的数据均需要通过data进行发送
// 通过AJAX，把数据提交到数据库
addIframe(function() {
iframeJquery.ajax({
url: 'http://B.h5course.com/addUser.php',
type: 'POST',
data: userdata,
success: function(data) {
console.log(data);
}
});
});完整版代码
最后我们一起来看一下完整版的JS代码
var iframeJquery = null;
function addIframe(callback) {
var newIframe = '<iframe id="newframe" src="http://B.h5course.com/b.html" name="postframe" style="width:0; height:0;position:absolute;left:-9999px;top:0;" />';
document.domain = "h5course.com";
$('body').append(newIframe);
$('#newframe').on('load', function() {
iframeJquery = $('#newframe')[0].contentWindow.$;
callback && callback();
});
}
$('.wrap span').click(function() {
// 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据
var userdata = $('form').serializeArray();
// 对密码进行md5加密
var passowrd = (userdata[1].value).MD5().toLowerCase();
// 将序列化后的密码修改为加密后的密码
userdata[1].value = passowrd;
// 通过AJAX，把数据提交到数据库
addIframe(function() {
iframeJquery.ajax({
url: 'http://B.h5course.com/addUser.php',
type: 'POST',
data: userdata,
success: function(data) {
console.log(data);
}
});
});
});PS：关于MD5.js，如果需要下载请前往：https://github.com/iceswan/JStools
HTML5小编-利利&堡堡 耗时6h