使用iframe实现无刷新提交表单|使用iframe实现无刷新提交表单的例子

更新时间:2019-09-29    来源:网页配色    手机版     字体:

【www.bbyears.com--网页配色】

最近在做一个项目,用到上传图片功能,发现ajax不能enctype=”multipart/form-data” 属性的表单,没办法,只能使用form表单直接提交的方法了,但是form表单直接提交会跳转页面,这样很不友好,也不是项目需求,于是上网搜索了一番,发现可以使用隐藏的iframe来实现。

具体的原理是form表单提交到iframe里面处理,而这个iframe是隐藏的,所以提交表单的时候当前页面没有发生任何变化。


   
   

最重要的就是form的target属性指向iframe的name值,这样就实现了提交到隐藏的iframe中,那么返回值应该怎么获取呢?

var frame1 = document.getElementById("frameFile1").contentDocument; //获取到iframe里面的
html元素

var frameJson1 = JSON.parse($(frame1).find("pre").html());


 //根据获取到的元素进行相应的操作
这样的话基本上可以模拟ajax的操作,实现无刷新提交表单。

例子1

 




无刷新提交表单
<script type="text/javascript">
</script>









这里的代码就想怎么写怎么写了,不过这个里执行完了刚才那个HMTL页面应该要有所表现,这时就要用到上个页面中的 function callback()了

echo ("<script type=\"text/javascript\">parent.callback("操作成功 ! ")");


例子2


用隐藏的 IFrame 提交表单部分替代Ajax。


原理如下:
1.写一个Javascript类,动态添加一个IFrame。具体是在 document.body 对象中appendChild 如下结构:

 

这是通过Style的"display:none",来实现IFrame的不可见的;
不可以设成style="width:0px,height:0px,display:none",这样会导致一些浏览器不添加IFrame
首先用DOM的方式生成,然后使用:
  var i_div = document.getElementById("i_frame_div");
  i_div.innerHTML="";
的方式将IFrame嵌入页面内;
注意,不要使用 DOM 的方式,这样会导致通过 IE 的 DOM 树不能正常获得IFrame内前网页的内容;
即不要采取如下形式:
  var i_frame=document.createElement("IFrame");
  i_frame.id="i_frame";
  ...
  var i_div = document.getElementById("i_frame_div");
  i_div.appendChild(i_frame);
这样的代码在

提交时,IFrame的内嵌页面inner.html在FireFox中会自动刷新。而IE 6.0 则会新弹出一个窗口;
src属性必须指定一个空的html文件;

2.将这个类实例化为一个全局变量,这个类的构造函数就写成以上代码;

3.写一个, 注意:
将其属性target指向IFrame的名称,这样提交后返回的目标页面就会在IFrame中,而不被看见。
将提交按钮改为一般的Button :

4.为以上类添加一个函数sendFileRequest(),参数放入Form的名称和回调函数的指针,这样就可以像表单中在提交前添加一些需要的变量,并且提交;

5.这里注意一点,如果表单中不包含这样的元素的话,表单内容完全可以自动生成,例如可以通过函数sendFileRequest()进行构建,或在嵌入的页 中进行构建,然后把表单的各种值以Key=Value数组的形式传入,借此可以封装成一个函数:
var form=document.createElement("Form");
...
但如果包含的话,文件上传时该tag的属性value是文件的名称,而此属性是只读的不能被赋值:
var fileInput=document.createElement("Input");
fileInput.type="file";
fileInput.name="myName"
fileInput.value="myfile.txt" //此句会出错
这是由于安全的原因,不能被赋值;
这样,表单必须做正常形式,target指向IFrame的name。

6.在以上的那个类中,再添加一个函数作为回调函数getResponse(msg):
  getResponse:function(msg){
   this.responseText=msg;
   this.HandleResponse.call(this);
   //调用用户传入的回调函数
  }

7.服务器端程序的撰写。主要是向IFrame提交一个可自动运行的网页:

 
 
 <script LANGUAGE="JavaScript">
 
 </script>

本文来源:http://www.bbyears.com/wangyezhizuo/70098.html