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. nodejs实现邮件发送

    需要安装的node模块 nodemailer 新建项目目录 mail-test 进入这个项目里使用终端初始化package.json(npm init) 安装express和nodemailer并保存 ...

  2. zabbix监控MySQL,Tomcat及配置邮件报警

    目录 一.思路 二.部署.配置 环境 安装zabbix 对zabbix进行初步优化 添加监控主机 部署监控Tomcat 配置邮件报警 三.总结 一.思路 首先搭建zabbixserver,本机需要安装 ...

  3. springboot的简单热部署

    最近开始学习使用springboot但springboot项目和之前的ssm等各种框架项目有所不同,本身集成了很多繁琐的东西,但 一些小功能还需自己配置.下面开始配置热部署. 首先当然是导入热部署的依 ...

  4. Linux命令——cp、rm、mv、touch、file、dir

    cp copy 拷贝文件 拷贝过程不指定目标文件名 则目标文件名和源文件名一样 [root@WebServer ~]# cp /91xueit/teacher.txt 51cto/ 拷贝过程指定目标文 ...

  5. 剑指Offer编程题(python)——链表

    1.从尾到头打印链表 #输入一个链表,按链表值从尾到头的顺序返回一个ArrayList.class ListNode: def __init__(self, x): self.val = x self ...

  6. 捷克200套UR51出货新版本FTP问题（FTP主动模式无法正常传输数据问题）

    FTP alg功能 普通NAT实现了对UDP或TCP报文头中的的IP地址及端口转换功能,但对应用层数据载荷中的字段无能为力,在许多应用层协议中,比如多媒体协议(H.323.SIP等).FTP.SQLN ...

  7. Java&Selenium截图方法封装

    Java&Selenium截图方法封装 package util; import org.apache.commons.io.FileUtils; import org.openqa.sele ...

  8. spring-AOP动态代理，以及aspectJ的xml配置或注解配置方法，各个拦截器的使用顺序

    package com.itheima.aspect; public class MyAspect { public void check_Permissions(){ System.out.prin ...

  9. [转载]es6 Promise.resolve()方法

    es6 Promise.resolve()方法 2018-01-27 22:29:06 ixygj197875 阅读数 16925更多 分类专栏: ES6标准入门 (阮一峰) ES6标准入门   Pr ...

  10. win10 专业版永久密钥

    激活码/密匙: 1.专业版: W269N-WFGWX-YVC9B-4J6C9-T83GXMH37W-N47XK-V7XM9-C7227-GCQG92X7P3-NGJTH-Q9TJF-8XDP9-T83 ...