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); });
注意关键点:
- form表单中的target=”uploadframe“与iframe中的id=”uploadframe“要一致;原因:target 指 form表单提交后返回结果要放的位置;
- $(window.frames[“uploadframe”].document).find(“body”).html()结果是form提交后的返回值,用循环来取值;
- _result 就是 返回后的json对象,可以直接获取想要的数据