不使用Ajax，如何实现表单提交不刷新页面？

目前，我想到的是使用<iframe>，如果有其他的方式，后续再补。

举个栗子：

在表单上传文件的时候必须设置enctype="multipart/form-data"表示表单既有文本数据，又有文件等二进制数据。但是使用用Ajax没有enctype="multipart/form-data"，所以不能直接上传文件，所以采用FormData对象包含数据上传。

这里我们不使用Ajax，直接提交表单，添加一个隐藏得iframe，将form表单的target指向这个iframe来阻止刷新并且上传文件。

<form method="POST" action="./upload.php" enctype="multipart/form-data" target='ifr' id="form1">

    <label for="name">name:</label><input type="text" id="name" name="name"/><br/>

    <input type="file" name="file" >

    <input type="submit" value="提交">

</form>

接着，我们要获取返回值

var iframe=document.getElementById("ifr");

    iframe.onload= function () {

        var bodycontent=iframe.contentDocument.body.innerHTML;

        console.log(bodycontent);

        //处理获取到的内容；

    }

这样的话基本上可以模拟ajax的操作，实现无刷新提交表单。 完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form method="POST" action="./upload.php" enctype="multipart/form-data" target='ifr' id="form1">

    <label for="name">name:</label><input type="text" id="name" name="name"/><br/>

    <input type="file" name="file" >

    <input type="submit" value="提交">

</form>

<iframe name='ifr' id="ifr" style='display: none;'></iframe>

<script>

var iframe=document.getElementById("ifr");

    iframe.onload= function () {

        var bodycontent=iframe.contentDocument.body.innerHTML;

        console.log(bodycontent);

        //处理获取到的内容；

    }

</script>

</body>

</html>


//php代码

<?php

echo "name:".$_POST['name'].";filename:".$_FILES['file']['name'];

不使用Ajax，如何实现表单提交不刷新页面的更多相关文章

  1. 防止表单提交时刷新页面-阻止form表单的默认提交行为

    最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...

  2. form表单提交不刷新页面的方法

    方法1:给form表单加onsubmit事件,值为return false; <form action="" method="post"  onsubmi ...

  3. ajax的序列化表单提交

    通过传统的 form 表单提交的方式上传文件 ? 1 2 3 4 <form id="uploadForm" action="" method=" ...

  4. layer,Jquery,validate实现表单验证，刷新页面，关闭子页面

    1.表单验证 //获取父层 var index = parent.layer.getFrameIndex(window.name); //刷新父层 parent.location.reload(); ...

  5. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

  6. Ajax模拟Form表单提交，含多种数据上传

    ---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...

  7. form表单提交数据，页面必定会刷新，ajax提交数据不会刷新，做到悄悄提交,多选删除，ajax提交实例

    很多页面用到的模态对话框,如知明网站https://dig.chouti.com/的登录页都是模态对话框, 当点登录时,是用的ajax提交,因为输入错了信息,有返回消息,而页面没有刷新. jquery ...

  8. 关于AJAX与form表单提交数据的格式

    一 form表单传输文件的格式: 只有三种: multipart/form-data 一般用于传输文件,图片文件或者其他的. 那么其中我们默认的是application/x-www-form-urle ...

  9. AJAX 实现form表单提交

    1.使用Ajax实现异步操作,点击登录按钮后,即触发form表单的提交事件,数据传输至后端 JSP: <script type="text/javascript" src=& ...

随机推荐

  1. Python高手之路【二】python基本数据类型

    一:数字 int int(整型): 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647 在64位系统上,整数的位数为64位,取值 ...

  2. Asp.net Boilerplate源码中NotNullAttribute的用处

    看Asp.net Boilerplate 1.1.3.0源码时发现有一个NotNullAttribute的定义和27处的引用,就是不知道它的作用,当然顾名思义是可以的,就是不知道它是怎么判断的,在哪里 ...

  3. Python标准模块--Iterators和Generators

    1 模块简介 当你开始使用Python编程时,你或许已经使用了iterators(迭代器)和generators(生成器),你当时可能并没有意识到.在本篇博文中,我们将会学习迭代器和生成器是什么.当然 ...

  4. 4.Android 打包时出现的Android Export aborted because fatal error were founds [closed]

    Android 程序开发完成后,如果要发布到互联网上供别人使用,就需要将自己的程序打包成Android 安装包文件(Android Package,APK),其扩展名为.apk.使用run as 也能 ...

  5. 安装angular-cli

    最近在学习angular2,并尝试用这个框架来做公司的一个新项目. 终于要开始开发了,等了1个多月. 因为第一次用这个新框架做项目,不太熟悉,就找了angular-cli这个脚手架来搭建项目. 安装了 ...

  6. 【架构设计】分布式文件系统 FastDFS的原理和安装使用

    本文地址 分享提纲: 1.概述 2. 原理 3. 安装 4. 使用 5. 参考文档 1. 概述 1.1)[常见文件系统] Google了一下,流行的开源分布式文件系统有很多,介绍如下:   -- mo ...

  7. Linux基础介绍【第五篇】

    linux权限位 Linux文件或目录的权限位是由9个权限位来控制,每三位为一组,它们分别是文件属主权限.属组权限.其他用户权限. r:read可读权限,对应数字4: w:write可写权限,对应数字 ...

  8. IP报头

      位字段的值设置为二进制的0100表示IP版本4(IPv4).设置为0110表示IP版本6(IPv6)   位,它表示32位字长的IP报头长度,设计报头长度的原因是数据包可选字段大小会发生变化.IP ...

  9. 支付宝web支付

    过程 1. 用户下单 2. 商户后台产生订单 3. 请求支付宝web支付页面(将订单信息返回给用户---放在form里面---隐藏起来-----并通过脚本自动提交此form到支付宝web支付页) 4. ...

  10. Netty5使用自签证书实现SSL安全连接

    这次使用的Netty是最新的5.0 Alpha2版本,下载地址是:http://dl.bintray.com/netty/downloads/netty-5.0.0.Alpha2.tar.bz2,发布 ...