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="0" checked=""><label for="cache_no">否</label>
        <input type="radio" id="cache_yes" name="cache" value="1" class="ml"><label for="cache_yes">是</label><br>

        <em class="color-red">* </em>文件：<input type="file" class="txt" name="uploadedFile" size="50" /><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=0;
$('#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=0;
      var timeSet=setInterval(function(){
        time_index++;
        var iframeObj = $(window.frames["uploadframe"].document); 
        var val=iframeObj.find("body").html();
        if(val!=""&&time_index<5){
          var _result=eval("(" + val + ")");    
          if(typeof _result.code!="undefined"&&_result.code=="0"){
            clearInterval(timeSet);
            return false;
          }else{
            $.modaldialog.smallTip("上傳失敗", {
                x: event.pageX,
                y: event.pageY
            });
            clearInterval(timeSet);
          }
        }else{
          clearInterval(timeSet);
        }
      },1000);
    });

注意關鍵點：

1. form表單中的target=”uploadframe“與iframe中的id=”uploadframe“要一致；原因：target 指 form表單提交后返回結果要放的位置；
2. $(window.frames[“uploadframe”].document).find(“body”).html()結果是form提交后的返回值，用循環來取值；
3. _result 就是 返回后的json對象，可以直接獲取想要的數據