首页 > 代码库 > iframe实现面页无刷新提交表单
iframe实现面页无刷新提交表单
一、表单提交到了哪里？
这似乎是个无知的问题，我们都知道表单提交到服务器，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实现面页无刷新提交表单