<!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. Linux入门——shell脚本常用信息小结

    1.shell中的$默认变量    $n           $1 表示第一个参数,$2 表示第二个参数 ...    $#           命令行参数的个数    $0           当前 ...

  2. sublime_text3常用配置

    安装(pojie)不再赘述. 一.设置字体与编码 preferences->Settings->Settings-User,在大括号中输入如下内容: “font_size”:16.0, “ ...

  3. 安装虚拟机&Linux命令学习

    安装虚拟机&Linux命令学习 基于VirtualBox虚拟机安装Ubuntu 1.下载安装VirtualBox 根据自己电脑(32位操作系统)的实际情况,我在网上找了相应的VirtualBo ...

  4. install netcdf

    https://gist.github.com/perrette/cd815d03830b53e24c82

  5. （The application/json Media Type for JavaScript Object Notation (JSON)）RFC4627-JSON格式定义

    原文  http://laichendong.com/rfc4627-zh_cn/ 摘要 JavaScript Object Notation (JSON)是一个轻量级的,基于文本的,跨语言的数据交换 ...

  6. 无旋treap的区间操作实现

    最近真的不爽...一道维修数列就做了我1上午+下午1h+1晚上+晚上1h+上午2h... 一道不错的自虐题... 由于这一片主要讲思想,代码我放这里了 不会无旋treap的童鞋可以进这里 呵呵... ...

  7. 深入解析QML引擎, 第2部分: 绑定(Bindings)

    原文  QML Engine Internals, Part 2: Bindings 译者注:这个解析QML引擎的文章共4篇,分析非常透彻,在国内几乎没有找到类似的分析,为了便于国内的QT/QML爱好 ...

  8. 小白初识 - 归并排序（MergeSort）

    归并排序是一种典型的用分治的思想解决问题的排序方式. 它的原理就是:将一个数组从中间分成两半,对分开的两半再分成两半,直到最终分到最小的单位(即单个元素)的时候, 将已经分开的数据两两合并,并且在合并 ...

  9. docker应用容器化准则—12 factor

    在云的时代,越来越多的传统应用需要迁移到云环境下,新应用也要求能适应云的架构设计和开发模式.而12-factor提供了一套标准的云原生应用开发的最佳原则. 在容器云项目中应用容器化主要参考12-Fac ...

  10. 剑指offer-二维数组中的查找01

    题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...