<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<iframe name="formsubmit" id="myFrame" style="display: none"></iframe>

<!-- 将form表单提交的窗口指向隐藏的ifrmae,并通过ifrmae提交数据。 -->

<form action="./login" method="POST" name="forphp" target="formsubmit">

    <p>

        <label for="uname">用户名：</label>

        <input type="text" name="uname" id="uname"/>

    </p>

    <p>

        <label for="pwd">密 码：</label>

        <input type="password" name="pwd" id="pwd"/>

    </p>

    <p>

        <input type="submit" value="登录" id="sub"/>

    </p>

</form>

</body>

</html>

<script>

    var form = document.getElementsByTagName('form')[0];

    var frame = document.getElementById('myFrame');

    function callback(a,b){

        var uname = document.getElementById('uname').value;

        var pwd = document.getElementById('pwd').value;

        if(uname == a && pwd == b ){

            alert('登录成功');

            form.reset();

        }

        else{

            alert('账号密码错误');

        }

    }

    frame.addEventListener('load',function(event){

            try{

                var result = JSON.parse(frame.contentWindow.document.body.textContent);

                // 识别登录结果

                if (result.code === 200){

                    callback(result.result.uname,result.result.psw);

                }

            }catch(er){

                //ignore

            }

        }

    );

</script>

　./login文件内容

{

    "code": 200,

    "result":{

        "uname":"admin",

        "psw":"test"

    }

}

【前端学习笔记】利用iframe实现表单的无刷新提交案例的更多相关文章

  1. 表单 - Form - 无刷新提交原理

    为什么Form组件的表单提交可以做到无刷新? EasyUI在提交的时候,将表单作为一个隐藏的iframe进行的提交,并不是我们看到的那个表单进行的提交 并且那个iframe使用了绝对定位,保证页面上不 ...

  2. Django学习笔记（五）—— 表单

    疯狂的暑假学习之  Django学习笔记(五)-- 表单 參考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path         ...

  3. Flutter学习笔记（13）--表单组件

    如需转载,请注明出处:Flutter学习笔记(13)--表单组件 表单组件是个包含表单元素的区域,表单元素允许用户输入内容,比如:文本区域,下拉表单,单选框.复选框等,常见的应用场景有:登陆.注册.输 ...

  4. Django学习笔记之Django Form表单详解

    知识预览 构建一个表单 在Django 中构建一个表单 Django Form 类详解 使用表单模板 回到顶部 构建一个表单 假设你想在你的网站上创建一个简单的表单,以获得用户的名字.你需要类似这样的 ...

  5. ng2 学习笔记（二）表单及表单验证

    在上一篇文章中提到了表单,只说了表单的数据绑定,这一篇文章主要讲一下表单验证,为什么把表单单独拿出来学习,主要是因为,表单是商业应用的支柱,我们用它来执行登录.求助.下单.预订机票.安排会议,以及不计 ...

  6. Struts2笔记——利用token防止表单重复提交

    在一些项目中经常会让用户提交表单,当用户点击按钮提交后,如果再次浏览器刷新,这就会造成表单重复提交,若是提交的内容上传至服务器并请求数据库保存,重复提交的表单可能会导致错误,然后跳转到错误界面,这是一 ...

  7. Javascript高级编程学习笔记（74）—— 表单（2）表单提交及重置

    表单提交 表单的很大一部分作用就是帮助用户完成和服务器的交互 所以表单提交是表单中比较重要的部分 虽然现如今的大部分应用场景都使用 AJAX 的异步请求来代替表单,但是仍有部分操作需要使用表单来完成, ...

  8. SpringMVC:学习笔记(5)——数据绑定及表单标签

    SpringMVC——数据绑定及表单标签 理解数据绑定 为什么要使用数据绑定 基于HTTP特性,所有的用户输入的请求参数类型都是String,比如下面表单: 按照我们以往所学,如果要获取请求的所有参数 ...

  9. Django学习笔记（3）——表单，测试和模板语法的学习

    一,表单form 为了接收用户的投票选择,我们需要在前段页面显示一个投票界面,让我们重写之前的polls/detail.html文件,代码如下: <h1>{{ question.quest ...

随机推荐

  1. 2016-2017-2 20155339《 java面向对象程序设计》实验四Android程序设计

    2016-2017-2 20155339< java面向对象程序设计>实验四Android程序设计 实验内容 1.Android Stuidio的安装测试: 参考<Java和Andr ...

  2. Hibernate框架用法

    一,Hibernate框架介绍 没有Hibernate之前,使用jdbc来连接数据库时,需要反射加载驱动,再获取连接 在连接上获取sql承载块,传入sql语句执行,获取结果集,解析结果 Hiberna ...

  3. 【信息安全】MD5加密浅析

    前段时间,网传京东泄露了几G的用户数据,后面又说用户数据是MD5加密的,让大家不要担心,改个密码之类云云. 出于好奇,上网了解了一下这个MD5. 一.MD5加密方式是什么 简单讲,MD5加密是一个用到 ...

  4. Eclipse 使用过程中的问题及解决方法

    1.Eclipse中java文件和jsp字体大小设置 1.更改所有文件的字体显示大小过程: Window->preferences->General->Appearance-> ...

  5. Python中的装饰器的使用及固定模式

    装饰器的使用: 在不想修改函数的调用方式,但是想给函数添加内容的功能的时候使用     为什么使用装饰器: 软件实体应该是可扩展,而不可修改的.也就是说,对扩展是开放的,而对修改是封闭的. 因此,引出 ...

  6. tomcat 部署项目到服务器

    参考博客,我选了一种最简单的方法来部署项目. 在tomcat 目录下 的  conf\Catalina\localhost 目录中,新建一个   ' 项目名.xml '   文件,名字用项目名表示, ...

  7. HTTP结构讲解——《HTTP权威指南》系列

    HTTP结构 第二部分的5章主要介绍了HTTP服务器,代理,缓存,网关和机器人应用程序,这些都是Web系统架构的构造模块. Web服务器 第五章 Web服务器会对HTTP请求进行处理并提供响应.术语& ...

  8. jenkins升级为2.134

    由于前面装的jenkins版本为2.130版本,昨天(2018.7.26)发现了两个jenkins的漏洞,影响范围为:Jenkins weekly 2.132 以及更早的版本.Jenkins LTS ...

  9. JUC——ThreadFactory线程工厂类（四）

    ThreadFactory线程工厂类 在默认情况下如果要想创建一个线程类对象,大部分情况的选择是:直接通过子类为父类进行实例化,利用Runnable子类为Runnable接口实例化. 或者直接调用La ...

  10. 002 -- MySQL的逻辑架构

                                            msql的逻辑架构图 第一层:主要功能是连接处理.授权认证.安全等.相当于JavaEE中的常说的Web层 第二层:包含了 ...