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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-04-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小狼的世界

Apache环境下页面乱码的几种可能总结

采用典型的LAMP架构开发的时候,环境中多处涉及到编码的指定,有一个地方忽略,都有可能造成页面汉字乱码的产生,本文将总结这些乱码产生的可能的原因,方便我们排查。

341
来自专栏偏前端工程师的驿站

Java魔法堂:找外援的利器——Runtime.exec详解

一、前言                                  Java虽然五脏俱全但总有软肋,譬如获取CPU等硬件信息,当然我们可以通过JNI调用...

18610
来自专栏前端小作坊

加载第三方JS的各种姿势

如果你的网站上面有很多第三方JS代码,那么“下载速度的不可控”很有可能导致你的网站会被拖慢。因为JS在执行的时候会影响到页面的DOM和样式等情况。浏览器在解析渲...

941
来自专栏点滴积累

geotrellis使用(二十)geotrellis1.0版本新功能及变化介绍

目录 前言 变化情况介绍 总结 一、前言        之前版本是0.9或者0.10.1、0.10.2,最近发现更新成为1.0.0-2077839。1.0应该也...

2994
来自专栏肖洒的博客

爬虫入门(一):轻量级爬虫

其中,内存适合个人,缓存数据库适合大型公司。 ### 4.网页下载器(urllib2)[核心组件]() - 网页下载器:将互联网上URL对应的网页下载到...

331
来自专栏Java 源码分析

MyBatis笔记二:配置

可以看到我们使用 <properties resource="db.properties"/> 引入了我们的数据据库的配置文件,然后这个标签有两个属性 : r...

1472
来自专栏我的博客

PHP与Flash as2.0简单交互

flash文档: mylist = new Object(); mylist.click = function(event:Object){       u...

2535
来自专栏MasiMaro 的技术博文

Windows程序设计笔记(二) 关于编写简单窗口程序中的几点疑惑

在编写窗口程序时主要是5个步骤,创建窗口类、注册窗口类、创建窗口、显示窗口、消息环的编写。对于这5个步骤为何要这样写,当初我不是太理解,学习到现在有些问题我基本...

503
来自专栏随心DevOps

Python,Shell 和 三个标准文件

场景 使用 Python 执行 Shell 命令(或者脚本),有两种执行场景: 等待,直到命令执行完毕,一次性获取返回结果,做一些你想做的事情; 命令执行的同时...

3376
来自专栏企鹅号快讯

8行代码实现ui文件到py文件转换

在用PyQt进行GUI编程时,一般先通过Qt Designer产生后缀为.ui的UI文件(类似于XML文件),接着将.ui文件转换成.py文件,再通过一个pyt...

2658

扫描关注云+社区