form + iframe 获取表单提交后返回的数据

原理：

　　submit 提交表单没有回调函数，但是可以用iframe来接收返回结果，最后进行格式转换就ok了；

原文地址: http://blog.csdn.net/simeng_1016/article/details/48008359

html: 部分代码

<form id="form_addcompress" action="/rest/upload" method="post" enctype="multipart/form-data" target="uploadframe">
        <em class="color-red">* </em>版本：<input type="text" class="txt" name="version" placeholder="如V1.0.0"><br/>

        <em class="color-red">* </em>加缓存：<input type="radio" id="cache_no" name="cache" value="" checked=""><label for="cache_no">否</label>
        <input type="radio" id="cache_yes" name="cache" value="" class="ml"><label for="cache_yes">是</label><br>

        <em class="color-red">* </em>文件：<input type="file" class="txt" name="uploadedFile" size="" /><br>

        版本描述：<textarea class="tarea" name="desc" style="height:60px"></textarea><br>
        <input type="button" class="btn" value="上传文件" id="upload_compressFile"/>
</form>
<iframe id="uploadframe" name="uploadframe" style="display:none"></iframe></div>

js: 部分代码

var time_index=;
$('#upload_compressFile').on('click',function(event){
      var $c_version=$('#form_addcompress input[name="version"]'),
          $c_uploadedFile=$('#form_addcompress input[name="uploadedFile"]');
      var c_version=$c_version.val(),
          c_uploadedFile=$c_uploadedFile.val();
      if(c_version==""){
        $c_version.css('borderColor','red');
      }else{
        $c_version.css('borderColor','#e1e1e1');
      }
      if(c_uploadedFile==""){
        $c_uploadedFile.css('borderColor','red');
      }else{
        $c_uploadedFile.css('borderColor','#e1e1e1');
      }
      if(c_version==""||c_uploadedFile==""){
        return false;
      }
      $('#form_addcompress').submit();
      time_index=;
      var timeSet=setInterval(function(){
        time_index++;
        var iframeObj = $(window.frames["uploadframe"].document);
        var val=iframeObj.find("body").html();
        if(val!=""&&time_index<){
          var _result=eval("(" + val + ")");
          if(typeof _result.code!="undefined"&&_result.code==""){
            clearInterval(timeSet);
            return false;
          }else{
            $.modaldialog.smallTip("上传失败", {
                x: event.pageX,
                y: event.pageY
            });
            clearInterval(timeSet);
          }
        }else{
          clearInterval(timeSet);
        }
      },);
    });

注意关键点：

1. form表单中的target=”uploadframe“与iframe中的id=”uploadframe“要一致；原因：target 指 form表单提交后返回结果要放的位置；
2. $(window.frames[“uploadframe”].document).find(“body”).html()结果是form提交后的返回值，用循环来取值；
3. _result 就是 返回后的json对象，可以直接获取想要的数据