利用iframe和form的target属性做一个简单的异步提交form表单

这是form部分

<style>
        h5{text-align: center}
        form{display:block;padding:20px 50px 5px 50px;background: #fff; margin: 0 auto;text-align: center;}
        input{padding: 5px;border: 1px solid #ccc;border-radius: 5px;font-size: 16px;}
        #upload_compressFile{background: lightgreen;color: #fff;border: none;outline-color: #eee;}
        </style>
        <form id="form_addcompress" action="/index/push" method="get" enctype="multipart/form-data" target="uploadframe">
            <!--<em class="color-red">* </em>-->
            商品id：<input type="text" class="txt" name="mer_id" placeholder="mer_id">
            <!--<em class="color-red">* </em>-->
            商品明细id：<input type="text" class="txt" name="mer_item_id" placeholder="mer_item_id">
            <input type="submit" class="btn" value="  更新  " id="upload_compressFile"/>
            
        </form>
        <h5>Tip:商品id和商品明细id都是可选的,只输入商品id会同步商品下的所有商品,只输入商品明细id只会同步当前商品明细</h5>

用css做一个loading

<div class="loading" id="loading">
<span></span>
</div>
<style>
        .loading{
            display: none;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 auto;
            margin-top:100px;
            position: relative;
            border:5px solid lightgreen;
            -webkit-animation: turn 2s linear infinite;
        }
        .loading span{
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            left: 50%;
            margin-top: -15px;
            margin-left: -15px;
            -webkit-animation: changeBgColor 2s linear infinite;
        }
        @-webkit-keyframes changeBgColor{
            0%{
                background: lightgreen;
            }
            100%{
                background: lightblue;
            }
        }
        @-webkit-keyframes turn{
            0%{
                -webkit-transform: rotate(0deg);
                border-color: lightgreen;
            }
            100%{
                -webkit-transform: rotate(360deg);
                border-color: lightblue;
            }
        }
</style>

重要的iframe

<iframe id="uploadframe" name="uploadframe" style="width: 100%;height:100%;display: none;"></iframe>

写一个提交显示loading

<script >
    document.querySelector("#uploadframe").onload =function(){
        document.querySelector("#loading").style.display='none';
        document.querySelector("#uploadframe").style.display='block';
    }
    document.querySelector("#upload_compressFile").onclick = function(){
        document.querySelector("#loading").style.display='block';
        document.querySelector("#uploadframe").style.display='none';
    };
</script>