zoukankan      html  css  js  c++  java
  • 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对象的方法或函数,就必须保证两个页面同域。否则操作非法。这种无刷新在网上随处可见,淘宝上很多。

  • 相关阅读:
    学习过程
    一个链表中包含环,请找出该链表的环的入口结点
    归并排序-递归实现
    31、求整数范围中1的个数
    冒泡排序
    常用的端口对应的协议
    数值的整数次方
    二分查找(折半查找)
    用两个队列模拟栈的弹出和输入
    Java源码-HashMap(jdk1.8)
  • 原文地址:https://www.cnblogs.com/cdwp8/p/4028847.html
Copyright © 2011-2022 走看看