用iframe模拟ajax表单提交

JavaScript
, ,

今天帮公司官网做提交商户资料的表单，由于涉及图片的提交，所以没有使用ajax来做。直接采用表单提交方式，由于需要对服务器返回的值进行处理，故而采用iframe来实现需求。

当中遇到的问题：
1.使用iframe框架实现需求原理
2.如何获取iframe框架中的返回信息

使用iframe框架实现模拟ajax提交效果

关于iframe

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
在表单提交页面插入iframe框架，并设置隐藏。

1
<iframe name='frameFile1' style='display: none;' id="frameFile1"></iframe>

在form表单属性中加入target属性，目标为iframe框架name。

1
<form action="" method="post" enctype="multipart/form-data" target="frameFile1">

这样当点击提交按钮后，表单就会提交到页面隐藏的iframe框架中，而当前页面不会有刷新效果。

如何获取iframe框架中的返回信息

获取iframe子窗口的document对象。

1
var frame1 = document.getElementById("frameFile1").contentDocument;

关于contentDocument

contentDocument 属性以 HTML 对象返回框架容纳的文档。可以通过所有标准的 DOM 方法来处理被返回的对象。

之后就可以通过子窗口的document对象，对服务器返回的值进行处理，如下是我对服务器返回数值1的接受与处理。

1
2
3
4
5
6
7
frame1.onload=function(){
  var res = frame1.contentDocument.getElementsByTagName('pre')[0].innerHTML;
  //console.log(res);
  if(res==1){
    location.href="wait.html";
  }
}