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 条评论
登录 后参与评论

相关文章

来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

7068
来自专栏落花落雨不落叶

canvas画简单电路图

64611
来自专栏杨龙飞前端

scrollto 到指定位置

2544
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4055
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2675
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2727
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏跟着阿笨一起玩NET

c#实现打印功能

2882
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4878
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2130

扫码关注云+社区