一、表单提交到了哪里？

　　这似乎是个无知的问题，我们都知道表单提交到服务器，java，php，asp等服务器，然后由服务器去读。那么之后呢，服务器总要返回点什么吧，要么返回 一个xml或json数据，要么返回一个页面，要么返回一个页面片段，但是返回到哪里了，这些结果在哪里展示？其实这就是常常被忽略的一个问题，尤其是 ajax用多了，觉得无刷新是理所当然的。在默认情况下，在什么页面提交的，就会将返回的数据(json或页面或页面片段)给这个页面。这里的页面指一个 框架，带有<html></html>结构的html页。

　　这样一来，当在A页面提交了一个表单，服务器返回了 一个信息，表示成功了，此时，返回的数据会给A页面，于是，A页面就"刷新"了一次。2005年，出现了异步刷新ajax。这样就可以“局部刷新”了，向 服务器提交数据时，不用通过表单了，可以通过浏览器对象来提交，服务器返回数据到该浏览器对象，这样便可以实现“局部刷新”了。

但是ajax有个致命问题，不能提交文件（后面有提到）。怎么办？

二、文件还得用表单来提交

为了克服ajax不能提交文件的问题，我们又想起了表单。当表单的enctype=multipart/form-data时，就可以上传文件了。可是这样又需要整个页面刷新，问题来了，两个难以同时满足。方法总是有的。于是出现了通过设置表单的target=xxxxIframe的方法。这样意味着表单提交到一个无关的页面，服务器返回时也返回到这个页 面，再在这个无关的页面进行js操作，改变需要更新的页面区域。而整个表单提交过程中，无关页面都是隐藏的，是个幕后推手。这就是 target=xxxxIframe的作用。

三、iframe实现面页无刷新提交表单

　　iframe与无刷新有悠久的关系。在ajax出现之前，无刷新是通过iframe来实现的。而在ajax里面又不能异步提交文件（低版本浏览器，高版本浏览器可以通过二进制转换实现文件的异步提交）iframe实现无刷新的原理就是在A页面的表单提交数据到服务器，并且指定target属性为B页面，服务器返回内容到B页面，然后在B页面中调用JavaScript程序，来刷新A页面，完成一次请求。如果在此过程中，B为A页面的一个iframe页面，而且一直不显示，则对用户来说，就是一个无刷新。

这种无刷新比ajax要麻烦，但是同样意义非凡。在上传文件时，ajax是无法提交的，此时iframe似乎成了不二选择。但是有一个要求，就是AB页面同域。因为在整个过程中，会在B页面来调用A页面的js对象的方法或函数，就必须保证两个页面同域。否则操作非法。这种无刷新在网上随处可见，淘宝上很多。

iframe实现面页无刷新提交表单的更多相关文章

  1. HTML无刷新提交表单

    通常对于无刷新提交表单,我们都是运用ajax实现的.前段时间跟着老大了解到另一种无刷新提交表单的方法,是利用iframe框架实现的.现在整理出来分享给大家. 第一种: (html页面) <!DO ...

  2. 使用iframe实现页面无刷新提交表单

    iframe提交表单其实比ajax要方便一些,当然ajax也有ajax的好处,只是ajax编码处理有时有些麻烦,虽然经过转码是可以解决中文问题,但如果直接使用iframe不存这些问题了,下面来看看. ...

  3. Ajax无刷新提交表单和显示

    ajax无刷新表单提交:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  4. 不使用ajax,无刷新提交表单

    <form action="form_action.asp" method="get" onsubmit"check_form()" ...

  5. js无刷新提交表单

    $("#form1").attr("target", "frameFile"); $("#form1").submit( ...

  6. Jquery Ajax自定义无刷新提交表单Form

    Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form ...

  7. 无刷新提交表单(非Ajax实现)

    HTML代码: <iframe id="fra" name="frm" style="display: none;"></ ...

  8. ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单

    有时候,不得不考虑到以下场景问题: 数据库表字段会频繁更改扩展,而流行的重业务的js框架过于依赖json数据接口,导致的问题是,数据库表更改 -> 数据接口更改 -> 前段框架逻辑更改.. ...

  9. 简单方法实现无刷新提交Form表单

    前几天遇到一个前端的问题.我希望提交表单后页面不跳转且不刷新当前页面,然而查了很多方法都没有解决. 由于Form 是提交后一定刷新页面的,所以我们可以用一个折中的办法.我们给Form 指定一个ifra ...

随机推荐

  1. Zabbix探索：纠结的选择

    Zabbix拥有两种分布式部署的架构,分别是: Master-Node-Client: Master-Proxy-Client: 两者的区别什么的官方有介绍,但是太过于笼统,对细节介绍的太少,幸亏之前 ...

  2. [GRYZ2015]阿Q的停车场

    题目描述 刚拿到驾照的KJ 总喜欢开着车到处兜风,玩完了再把车停到阿Q的停车场里,虽然她对自己停车的水平很有信心,但她还是不放心其他人的停车水平,尤其是Kelukin.于是,她每次都把自己的爱车停在距 ...

  3. acm-字符串整理

    一.后缀数组 #define maxn 200015 int wa[maxn],wb[maxn],wv[maxn],WS[maxn]; int len, sa[maxn] ; inline void ...

  4. Hadoop HDFS概念学习系列之hdfs里的文件下载闲谈（二十六）

    hdfs里的文件下载 可以,通过hadoop distributed system来下载,而且速度非常之快.涨知识!!! 或者,通过命令行的方式,也可以! ********************** ...

  5. 转载 SharePoint Foundation和SharePoint Server的区别

    SharePoint Server 2010用来取代MOSS 2007,它有标准版和企业版两个版本,使用SQL Server数据库: 早期版本中的STS或WSS在2010中更名为SharePoint ...

  6. .NET设计模式（5）：工厂方法模式（Factory Method）

    ):工厂方法模式(Factory Method)    工厂方法模式(Factory Method) --.NET设计模式系列之五 Terrylee,2004年1月2日 转载:http://terry ...

  7. 第3组UI组件：AdapterView及其子类

    1 AdapterView类简介 1.1 AdapterView组件是一组重要的组件,AdapterView本身是一个抽线类,实际使用更多的都是Adapter相关子类,AdapterView具有如下特 ...

  8. Java NIO 备忘

    $.backlog:可以把它简单理解为一个 listening socket 的请求连接队列的限制.当队列中的连接请求达到队列限制时,kernel 会拒绝信的连接请求.只有当应用程序通过 accept ...

  9. shuffle 过程

    Shuffle描述着数据从map task输出到reduce task输入的这段过程(Shuffle的正常意思是洗牌或弄乱). 以下是官网的流程图: 从最基本的要求来说,我们对Shuffle过程的期望 ...

  10. [威客任务]￥800.00 JS实现网站联动三级选项

    任务地址:http://task.zhubajie.com/3275832/ 具体要求: 要求1) 选单样式参照附件2) 点击第一个选项内容后,跳出第二个选项栏位,并自动更新选项内容3) 点击第二个选 ...