<!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命令的学习 ——20155215宣言

    一.虚拟机的安装 虚拟机的安装对我来说真可谓是一波三折.打开老师发布的安装教程,简单地浏览了一下,主要步骤都有图文解说.我本来以为这个安装按部就班即可,可哪知道,问题一个接着一个出现. 问题1 在我下 ...

  2. 20155336 实验三 敏捷开发与XP实践

    20155336 实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验内容及步骤 (一)编码标准:在IDEA中使用工具(Code->Reformate Code)把代码重 ...

  3. 20145226 《Java程序设计》第3周学习总结

    教材学习内容总结 学习目标 区分基本类型与类类型 理解对象的生成与引用的关系 掌握String类和数组 理解封装的概念 掌握构造方法的定义 理解重载的概念 掌握static的应用 教材第四章内容总结 ...

  4. 【转载】DXUT进阶

    原文:DXUT进阶 概要 这个指南涵盖了更多DXUT的高级应用. 这个指南里的大部分功能是可选的, 为了以最小的代价来增强你的应用程序. DXUT提供了一个简单的基于GUI系统的精灵和一个设备设置对话 ...

  5. 【转载】Direct3D纹理映射

    原文:Direct3D纹理映射 更详细的文章:DirectX中的纹理映射相关技术 (转)   创建纹理对象 1: HRESULT CreateTexture( 2:   UINT Width,//宽度 ...

  6. PHPStrom 里修改Emmet对php的自动扩展

    PHPStrom 7.1.3 Emmet 想必大家都比较清楚了.Emmet有个特点,对于匹配不到的符号,仍然会自动扩展为标签的形式,比如我输入aaaa,然后按tab,会自动扩展为<aaaa> ...

  7. linux命令提示符设置

    变成绿色 [root@localhost /usr/local]#vim /root/.bashrc # .bashrc # User specific aliases and functions a ...

  8. CentOS7部署ELK5.2

    原文发表于cu:2017-02-10 参考文档: Elasticsearchyum文档:https://www.elastic.co/guide/en/elasticsearch/reference/ ...

  9. 『ACM C++』PTA浙大 | 基础题 - Have Fun with Numbers

    连着这两道都是开学前数构老师的“爱心作业”,还没上课开学就给我们布置作业了,这道题有点小坑,也经常遇到类似的问题,特地拿出来记录一下. -------------------------------- ...

  10. New begin

    Purpose 今天更换了id,希望重新沉淀. 晚上看到国外一个博客,落款有个中文: 敬惜字纸. 共勉.