<!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. 2017-2018-1 20155307 《信息安全系统设计基础》第san周学习总结

    2017-2018-1 20155307 <信息安全系统设计基础>第三周学习总结 教材学习内容总结 无符号数和有符号数的特性,数字如何表示,IEEE标准,浮点数格式.(我感觉我把课下测试做 ...

  2. 20155311 实验三 敏捷开发与XP实践 实验报告

    20155311 实验三 敏捷开发与XP实践 实验报告 实验内容 XP基础 xp核心工具 相关工具 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim ...

  3. 2017-2018-1 20155321《信息安全技术》实验二——Windows口令破解

    2017-2018-1 20155321<信息安全技术>实验二--Windows口令破解 实验原理 口令破解方法 口令破解主要有两种方法:字典破解和暴力破解. 字典破解是指通过破解者对管理 ...

  4. 【LG2183】[国家集训队]礼物

    [LG2183][国家集训队]礼物 题面 洛谷 题解 插曲:不知道为什么,一看到这个题目,我就想到了这个人... 如果不是有\(exLucas\),这题就是\(sb\)题... 首先,若\(\sum_ ...

  5. 基于testng自动化添加allure报告展示以及jenkins集成

    本地执行方式: 1.下载地址 http://allure.qatools.ru/ 2.执行机器添加环境变量 如mac:vi /etc/profile export ALLURE_HOME=/Users ...

  6. 强化学习读书笔记 - 09 - on-policy预测的近似方法

    强化学习读书笔记 - 09 - on-policy预测的近似方法 参照 Reinforcement Learning: An Introduction, Richard S. Sutton and A ...

  7. 自动化之UI(autoit)

    自动化 说到自动化,我真的很不喜欢UI这层去做实践.前置条件要求比较严谨,如果不满足特定的前置条件,那么成本实在太大了. 投入与产出差过大,效果打折扣.从互联网来说,UI自动化是入门门槛很低的一种实践 ...

  8. selenium +java 多个类公用driver问题

    问题点:太久没有写selenium代码,居然把driver公用的问题忘记了,即:每写一个测试类,执行过程中都会新建一个窗口,这样应该说是非常不专业的. 大概想了一个方法,虽然看起来也不怎么专业,但感觉 ...

  9. thinkphp5框架生成二维码

    二话不说,先上代码: 第一中: 不用再本地保存文件,直接在前台页面显示: 这是控制器里面的内容,哦,对啦,首先要下载SDK:.phpqrcode类文件下载,下载地址:https://sourcefor ...

  10. Rest-Assured 测试框架

    Rest-Assured 是一个测试 Restful Web Service 的 Java 类库,我们能够测试各种各样的请求组合,依次测试核心业务逻辑的不同组合. 它是通过发送特定的rest api, ...