一、表单提交到了哪里?

  这似乎是个无知的问题,我们都知道表单提交到服务器,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. Kafka Unknow host

    今天在测试kafka时遇到 Unknow host问题,经过Google,找到了解决办法,总结如下: 原因:Linux主机名称为null 第一步通过修改/etc/sysconfig/network 中 ...

  2. 2015上海网络赛 A Puzzled Elena

    题意:给定一棵树,求这个节点的所有子树中包括他本身与它互质的节点的个数. 解题思路:题利用dfs序+容斥原理+前缀和性质解决.题目中要求每个结点,和多少个它的子结点互素.如果每次为了求一个点去跑一遍d ...

  3. 【数论】Baby Step Giant Step

    被数论怒虐了一天 心力憔悴啊 感觉脑细胞已经快消耗殆尽了>_< 但是今天还是会了很多之前觉得特别神的东西 比如BSGS 之前听了两遍 好像都因为听得睡着了没听懂-.- 今天终于硬着头皮学会 ...

  4. P、NP及NPC问题

    关于计算理论的一些概念 —判定问题和最优化问题 —归约 —多项式时间 —抽象问题 —形式语言体系 NPC证明 —一个问题转换为判定问题 —说明问题是NP —一个NPC问题规约到这个问题 —只需要规约到 ...

  5. Kooboo中如何切换数据库(注意:如果切换数据库,需要Kooboo中没有一个website 否则会报错数据库中没有表之类的)

    Setup database provider 来自Kooboo document   Kooboo CMS can almost support all the types of database, ...

  6. thinking in java Generics Latent typing

    The beginning of this chapter introduced the idea of writing code that can be applied as generally a ...

  7. pcb原理图注意问题大汇总

    1. 元器件之间连线用Wire(■)命令而不是用Line( /)命令,虽然从表面上看,两者都是直线,只是颜色稍有些不同,但用Wire(■)命令放置的导线是具有电气特性的,而用Line(/)命令放置的直 ...

  8. nyoj 891 找点

    找点 时间限制:2000 ms  |  内存限制:65535 KB 难度:2 描述 上数学课时,老师给了LYH一些闭区间,让他取尽量少的点,使得每个闭区间内至少有一个点.但是这几天LYH太忙了,你们帮 ...

  9. iOS几个效果动画-------------------(实例详讲)qq粘性效果

    这几天做了一些简单iOS的效果图,感觉苹果官方已经帮我们做了很多了,我们只是站在巨人的肩膀上编程,这些也没什么难的,最难的也就是用到了初中的三角函数,先让大家看看这几个动画吧.先列这几个把,由上而下分 ...

  10. Hibernate映射文件简单配置

    <?xml version="1.0" ?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibe ...