form + iframe 获取表单提交后返回的数据
2017-07-07 17:58
531 查看
原理:
submit 提交表单没有回调函数,但是可以用iframe来接收返回结果,最后进行格式转换就ok了;
原文地址: http://blog.csdn.net/simeng_1016/article/details/48008359
html: 部分代码
js: 部分代码
注意关键点:
form表单中的target=”uploadframe“与iframe中的id=”uploadframe“要一致;原因:target 指 form表单提交后返回结果要放的位置;
$(window.frames[“uploadframe”].document).find(“body”).html()结果是form提交后的返回值,用循环来取值;
_result 就是 返回后的json对象,可以直接获取想要的数据
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对象,可以直接获取想要的数据
相关文章推荐
- Jquery Jsonp跨域提交表单获取返回数据
- jsp form表单提交获取返回数据(也可用来上传文件、图片)
- easyui使用Ajax提交表单,返回Json数据
- AJAX通过get提交数据,并获取文本返回结果
- jquery序列化form表单使用ajax提交后处理返回的json数据
- 通过JS向表单中增加元素后提交无法获取数据问题的解决。
- form表单在firefox下提交 后台获取到数据,但是在IE8下后台却只能获取部分值
- ASP.NET MVC中在Action获取提交的表单数据方法总结 .
- jquery序列化form表单使用ajax提交后处理返回的json数据
- ajax form数据封装,ajax提交整个form表单,ajax 自动获取当前form数据
- JS自动获取Form表单数据并转换成键值对 ajax提交Form
- Post提交数据到接口或网址 获取返回数据
- javaweb之request通过各种表单提交项收集用户数据和用request获取表单提交数据
- jquery获取表单值和jquery提交数据
- 表单过期的处理(提交出错后返回,保存原来数据)
- .net post提交数据获取返回数据的方法
- 客户端表单提交数据方式与服务器获取数据
- JSP 第一天:提交表单--获取表单中的数据值
- 用C#向表单提交数据并且得到返回页面代码
- html form表单提交数据并后台获取