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

作者：袖梨 2022-06-25

最近在做一个项目，用到上传图片功能，发现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

无刷新提交表单

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

echo ("

例子2

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

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

这是通过Style的"display:none",来实现IFrame的不可见的；
不可以设成style=",,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);
这样的代码在

中不包含这样的元素的话，表单内容完全可以自动生成，例如可以通过函数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提交一个可自动运行的网页：