不使用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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/456566.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AIML知识库数据匹配原理解析

目录&#xff1a;前言&#xff1a;1、AIML系统工作流程2、AIML的核心推理机制3、推理举例4、匹配规则及实践中遇到的一些问题的解释总结&#xff1a; 目录&#xff1a; 前言&#xff1a; 参考&#xff1a;《Alice机理分析与应用研究》 关于AIML库这里就不介绍了&#xff0c…

【Python】模拟面试技术面试题答

一、 python语法 1. 请说一下你对迭代器和生成器的区别&#xff1f; 2. 什么是线程安全&#xff1f; 3. 你所遵循的代码规范是什么&#xff1f;请举例说明其要求&#xff1f; 4. Python中怎么简单的实现列表去重&#xff1f; 5. python 中 yield 的用法…

ROS机器人程序设计(原书第2版)2.3 理解ROS开源社区级

2.3 理解ROS开源社区级 ROS开源社区级的概念主要是ROS资源&#xff0c;其能够通过独立的网络社区分享软件和知识。这些资源包括&#xff1a; 发行版&#xff08;Distribution&#xff09; ROS发行版是可以独立安装、带有版本号的一系列综合功能包。ROS发行版像Linux发行版一样…

Win7 U盘安装Ubuntu16.04 双系统

Win7系统下安装Ubuntu系统&#xff0c;主要分为三步&#xff1a; 第1步&#xff1a;制作U盘启动盘 第2步&#xff1a;安装Ubuntu系统 第3步&#xff1a;创建启动系统引导 第1步&#xff1a;制作U盘启动盘 1.下载Ubuntu16.04安装镜像&#xff0c;官网地址&#xff1a;http://www…

Word2VecDoc2Vec总结

转自&#xff1a;http://www.cnblogs.com/maybe2030/p/5427148.html 目录&#xff1a;1、词向量2、Distributed representation词向量表示3、word2vec算法思想4、doc2vec算法思想5、Doc2Vec主要参数详解总结&#xff1a; 目录&#xff1a; 1、词向量 自然语言理解的问题要转…

ubantu安装pycharm破解+Linux基础简介

一、课程简介 linux服务器配置及常用命令 Ubuntu centos 开发软件配置及服务环境的搭建 软件的安装和配置 mysql数据库使用、monDB使用、redius的使用 git的使用 html/css 课程学习方式 表达训练 学习方法&#xff1a; linux学习基本上都是命令和配置 命令要多敲多记 …

《游戏视频主播手册》——2.2 哪些人适合做游戏主播

本节书摘来自异步社区《游戏视频主播手册》一书中的第2章&#xff0c;第2.2节&#xff0c;作者 王岩&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.2 哪些人适合做游戏主播 据不完全统计&#xff0c;目前国内有超过26000名活跃的游戏主播。所谓“活跃的…

Doc2Vec实践

目录:前言&#xff1a;第一步&#xff1a;首先我们需要拿到对应的数据&#xff0c;相关的代码如下&#xff1a;第二步&#xff1a;拿到对应的数据后&#xff0c;就开始训练数据生成对应的model&#xff0c;对应的代码如下&#xff1a;第三步&#xff1a;得到生成的model后&…

Linux常用命令全网最全

一、linux文件系统结构 sudo apt-get install treetree --help #查看帮助tree -L 1 #显示文件目录 rootubuntu16 /# tree -L 1 . #系统根目录&#xff0c;有且只有一个根目录 ├── bin #存放常见的命令 ├── boot #系统启动文件和核心文件都在这个目录…

《开源思索集》一Source Code + X

本节书摘来异步社区《开源思索集》一书中的第1章&#xff0c;作者&#xff1a; 庄表伟 责编&#xff1a; 杨海玲, 更多章节内容可以访问云栖社区“异步社区”公众号查看。 Source Code X 开源思索集最近&#xff0c;有一位来自学术界朋友&#xff0c;找到了我们这个开源的圈子…

机器学习中目标函数、损失函数以及正则项的通俗解释

目录&#xff1a;前言&#xff1a;1、什么是目标函数&#xff1f;2、损失函数3、正则化总结&#xff1a; 目录&#xff1a; 前言&#xff1a; 今天看到一篇很精简的文章来说明目标函数、损失函数以及正则项是什么。以下是文章正文。 转自&#xff1a;https://xiaozhuanlan.…

Linux中的 硬链接ln和软连接ln -s

文件都有文件名与数据&#xff0c;这在 Linux 上被分成两个部分&#xff1a;用户数据 (user data) 与元数据 (metadata)。用户数据&#xff0c;即文件数据块 (data block)&#xff0c;数据块是记录文件真实内容的地方&#xff1b;而元数据则是文件的附加属性&#xff0c;如文件…

干货分享!DevExpressv16.2最新版演示示例等你来收!(上)

2019独角兽企业重金招聘Python工程师标准>>> 为解决大家找资源难的问题&#xff0c;EVGET联合DevExpress控件中文网盘点热门的DevExpress资讯、Demo示例、版本升级及下载&#xff0c;以及各种教程推荐等。更多下载及资讯也可以在DevExpress控件中文网中找到&#xf…

一文看懂哈夫曼树与哈夫曼编码

转自&#xff1a;http://www.cnblogs.com/Jezze/archive/2011/12/23/2299884.html 在一般的数据结构的书中&#xff0c;树的那章后面&#xff0c;著者一般都会介绍一下哈夫曼(HUFFMAN)树和哈夫曼编码。哈夫曼编码是哈夫曼树的一个应用。哈夫曼编码应用广泛&#xff0c;如JPEG中…

解决:未能将管道连接到虚拟机: 所有的管道范例都在使用中。

虚拟机无端出现: VMware Workstation 无法连接到虚拟机。请确保您有权限运行该程序、访问改程序使用的所有目录以及访问所有临时文件目录。未能将管道连接到虚拟机: 所有的管道范例都在使用中。 原因&#xff1a;Ubuntu开机慢到开不开&#xff0c;我就在任务管理器强制结束了…

tcpdf开发文档(中文翻译版)

2017年5月3日15:06:15 这个是英文翻译版&#xff0c;我看过作者的文档其实不太友善或者不方便阅读&#xff0c;不如wiki方便 后面补充一些&#xff0c;结构性文档翻译 这是一部官方网站文档&#xff0c;剩余大部分都是开发的时候和网络总结来的 项目官网&#xff1a;https://t…

CCF推荐各种国际学术会议和期刊目录

这是中国计算机学会推荐国际学术会议和期刊目录2015年版本的内容&#xff0c; 主要罗列了国际上计算机相关的各个方向的顶级学术会议和期刊目录&#xff08;包含A、B、C三个等级&#xff09;。 包含的方向有&#xff1a; 计算机体系结构/并行与分布计算/存储系统计算机网络网络…

Linux基本操作【作业】

&#xfeff;1.如何使用命令立即重启linux操作系统&#xff1f; sudo reboot 2.如何查看/etc下的所有文件&#xff0c;并以列表格式显示&#xff0c;并且显示隐藏文件 cd /etc | ls -la 3.一次性创建 text/1/2/3/4 cd tmp mkdir -p text/1/2/3/4 &#xff08;1&#xff…

开发日志_Jan.8.2017

这两天继续着手开发碰撞部分。 主要工作是写碰撞类和运动线程类。碰撞主要在于算法&#xff0c;运动线程只要管理好就行了。 之前碰撞测试中&#xff08;即还未添加完整碰撞算法时&#xff09;遇到各种bug&#xff0c;疑似机器人和小球的定位点不明所造成的。昨天研究了下QT下的…

Nginx【学习笔记】

Nginx 1. nginx可以做什么&#xff1f; 可针对静态资源高速高并发访问及缓存。 可使用反向代理加速&#xff0c;并且可进行数据缓存。 具有简单负载均衡、节点健康检查和容错功能。 支持远程FastCGI服务的缓存加速。 支持FastCGI、Uwsgi、SCGI、Memcached Servers的加速和…