不使用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. 移动web基本知识

    1.pixel像素基础 1.px:csspixel 逻辑像素,浏览器所使用的抽象单位 2.dp,pt:设备无关像素 3.devicePixelPatio 设备像素缩放比例 2.viewport 1. ...

  2. Android笔记——Button点击事件几种写法

    Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...

  3. “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型，或该类型未注册为安全类型。”

    自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...

  4. BPM配置故事之案例5-必填与水印文本

    物资申请表改好了,但是没过两天老李又找来了. 老李:这个表格每次都是各个部门发给我们,再由我们采购部来填,太影响效率了,以后要让他们自己填. 小明:那就让他们填呗,他们有权限啊. 老李:可是他们说不会 ...

  5. Android之SQLite数据存储

    一.SQLite保存数据介绍 将数据库保存在数据库对于重复或者结构化数据(比如契约信息)而言是理想之选.SQL数据库的主要原则之一是架构:数据库如何组织正式声明.架构体现于用于创建数据库的SQL语句. ...

  6. iOS app内存分析套路

    iOS app内存分析套路 Xcode下查看app内存使用情况有2中方法: Navigator导航栏中的Debug navigator中的Memory Instruments 一．Debug navi ...

  7. Vim使用

    模式 ESC\Ctrl+c:退出编辑模式 ZZ\wq:命令模式下保存退出 编辑 i:进入编辑模式 I:转到行首非空字符开始编辑 s:删除当前字符进入编辑模式 a:从当前字符后开始编辑 A:从当前行末非 ...

  8. 如何查看w3p.exe 和IIS 应用程序池的关系

    图形界面方式 命令行方式 如果找不到 appcmd Appcmd.exe exists at the location %systemroot%\system32\inetsrv\. You eith ...

  9. POJ2774 Long Long Message [后缀数组]

    Long Long Message Time Limit: 4000MS   Memory Limit: 131072K Total Submissions: 29277   Accepted: 11 ...

  10. 第14章 Linux启动管理（1）_系统运行级别

    1. CentOS 6.x 启动管理 (1)系统运行级别 ①运行级别 运行级别 含义 0 关机 1 单用户模式,可以想象为Windows的安全模式,主要用于系统修复.(但不是Linux的安全模式) 2 ...