Ajax最大的特点就是可以不刷新页面而实现数据的通信及更改页面信息。那么用AJAX进行后台通信传递字符串还是可以的，遇到上传文件该怎么办呢？基于安全考虑，JS是不能直接进行文件操作的，只好用原始的from来提交文件上传了。这样一来，用form不就要刷新页面了吗？其实也不是。

给我们的from加一个target属性，并且将这个属性的值设置为隐藏的iframe的ID，这样一来，刷新的页面是我们隐藏的iframe，我们的页面就不会刷新了。这个方法，时广大前辈的知识和经验的结晶，我是不费吹灰之力拿来用了，站在巨人的肩膀上。

<html>  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  

<title>AjaxUpload</title>  

</head>  

<body onLoad="javascript:alert('onload')" onUnload="javascript:alert('onunload')">   

<form name="AjaxUpload" method="post" action="upload.jsp" target="hidden_frame">  

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

</form>  

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

</body>  

</html>

form表单无刷新提交的更多相关文章

  1. form表单无刷新提交文件（iframe）

    先看一段代码(PHP例子) 1.表单代码(form.html): <iframe name="testIframeName" style="display:none ...

  2. $_FILES参数详解及简单<form>表单无刷新上传文件

    $_FILES:经由 HTTP POST 文件上传而提交至脚本的变量,类似于旧数组$HTTP_POST_FILES 数组(依然有效,但反对使用)详细信息可参阅 POST方法上传 $_FILES数组内容 ...

  3. FORM表单不刷新提交POST数据

    很多时候表单太多项,JQ懒的去处理了 使用这个提交吧.和她讨论出去旅游,去哪里好呢,此时还和以前一样吗? function testaction(){ var f = $("#publish ...

  4. 提交form表单不刷新页面案列

    提交form表单不刷新页面其实很简单的,这里拿上传图片来举列,大家有什么其它的方法也欢迎留言告知与我 <form action="" method="post&qu ...

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

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

  6. form表单两种提交方式的不同

      我们在使用<Form>表单的时候,最常用的提交方式就是Get和Post.我们都知道这两种方式最大的差别就是安全性,除此之外,它们还有哪些其他的区别,你知道吗?   在<Form& ...

  7. Form表单三种提交按钮的区别？

    1.<input type='button' id='btn' onclick='check()' value="提交"> 说明:只是普通的按钮(不附带提交功能),不会 ...

  8. form表单input回车提交问题

    问题:文本框输入完成后点击回车页面刷新问题出在form上,当表单中只有一个文本框的时候获取焦点并点击回车之后会提交表单内容,就会发生刷新事件. 解决方法: 1.增加一个隐藏的输入框 <input ...

  9. form 表单跨域提交

    <!DOCTYPE html><html> <head> <title>form 表单上传文件</title> <script src ...

随机推荐

  1. Linux增加虚拟内存

    Docker容器启动Mysql镜像报错,提示无法分配内存,报错信息如下: 由此我们看到Swap为0,考虑适当增加swap. Linux开启swap空间有好几种方法,在这里只介绍比较常用的两种. 使用交 ...

  2. 整理一下Promise 的用法

    Promise 的定义 Pormise是JS的异步编程的一种解决方案,在ES6将其写进了语言标准,提供了原生的Promise对象. Promise简单来理解就是一个容器,里面存放着某个未来才会结束的事 ...

  3. 树莓派二：apt-get出错、蓝牙、汉化、输入法

    用apt-get install一个软件的时候出现了一个错误: E: Encountered a section with no Package: header E: Problem with Mer ...

  4. Framework7 - 入门教程（安装、配置、创建一个H5应用）

    1,Framework7介绍 (1)Framework7 是一个开源免费的框架.可以用来开发混合移动应用(原生和 HTML 混合)或者开发 iOS & Android 风格的 WEB APP. ...

  5. linux服务器忘记密码操作

    当重启镜像时候 看到这个界面的时候 按1 按1之后进入如下界面 红色区域有解释 按e是编译模式,我们按e OK 这里我们选择第二行按b 进入开发者模式,然后等待启动 然后更改密码

  6. 学习笔记：Python序列化常用工具及性能对比

    什么叫序列化?简单来讲就是将内存中的变量数据转而存储到磁盘上或是通过网络传输到远程. 反序列化是指:把变量数据从序列化的对象重新读到内存里. 下面我们一起来看看,python里面序列化常用的json. ...

  7. 10_Azkaban案例实践3_Command操作HDFS

    HDFS操作任务 1.创建job描述文件 # fs.job type=command command=/usr/local/src/hadoop-2.6.4/bin/hadoop fs -mkdir ...

  8. openpose-opencv 的body数据多人体姿态估计

    介绍 opencv除了支持常用的物体检测模型和分类模型之外,还支持openpose模型,同样是线下训练和线上调用.这里不做特别多的介绍,先把源代码和数据放出来- 实验模型获取地址:https://gi ...

  9. charles设置截图及常见问题汇总

    常见问题: 1.手机配置charles代理后,手机无法上网,无法访问chls.pro/ssl,解决办法:关闭电脑防火墙: 关闭后即可上网. 2.设置代理请求,charles看不到任何请求,解决办法:p ...

  10. gorm忽略struct种的field, 不映射到表里面

    https://github.com/jinzhu/gorm/pull/1111/commits/3c01fe791514d7064791a17d8b067106866d1e2f