zoukankan      html  css  js  c++  java
  • 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对象,可以直接获取想要的数据
  • 相关阅读:
    软件需求模式阅读笔记02
    软件需求模式阅读笔记1
    问题账户需求分析
    浅谈软件架构师的工作过程
    架构之美阅读笔记五
    架构之美阅读笔记四
    架构之美阅读笔记三
    架构之美阅读笔记二
    架构之美阅读笔记一
    软件需求与分析课堂讨论一
  • 原文地址:https://www.cnblogs.com/wangyihong/p/7133523.html
Copyright © 2011-2022 走看看