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

不使用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代码<?phpecho "name:".$_POST['name'].";filename:".$_FILES['file']['name'];

转载于:https://www.cnblogs.com/bluey/p/6255372.html

不使用Ajax，如何实现表单提交不刷新页面相关推荐

vue 添加完数据后刷新页面_vue form 表单提交后刷新页面的方法
最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数 ...
php阻止form提交表单提交,防止表单提交时刷新页面-阻止form表单的默认提交行为...
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
form表单提交不刷新页面的方法
方法1:给form表单加onsubmit事件,值为return false; <form action="" method="post" οnsubmi ...
ajax 模拟表单提交,Ajax模拟Form表单提交，含多种数据上传
---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...
ajax异步实现表单的无刷新验证
在实现ajax异步实现表单的无刷新验证之前我们先要了解什么是异步什么是同步 "同步模式"就是上一段的模式,后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序 ...
php提交后刷新父页面,jquery – php ajax表单提交没有刷新父页面
我有一些问题的ajax表单提交 $("#send").on("click", function() { $.ajax({ type: "POST&qu ...
AJAX 实现form表单提交
1.使用Ajax实现异步操作,点击登录按钮后,即触发form表单的提交事件,数据传输至后端 JSP: <script type="text/javascript" src=& ...
html表单提交后显示,javascript – 在表单提交后在页面上显示消息
我有一个包含2个字段的表单(对于此示例),我使用 JavaScript验证,如果字段包含数据,则表单将在用户单击"提交"按钮时提交.我在表单标签中使用iframe将输出发送到同一页 ...
Extjs6关于Ajax和form表单提交以及store请求session超时的处理方法
对于Store的处理每个store配置的时候,配上load监听,加载时处理: usrStore : {model : 'App.model.Usr',autoLoad : false,proxy : ...

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

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

不使用Ajax，如何实现表单提交不刷新页面相关推荐

最新文章

热门文章