javascript - 怎么能阻止表单提交跳转到action地址，

问题描述

问 题

因为要上传文件流，所以只能将提交写在标签里，但是提交的时候会跳转到acion地址，网上也找了很多方法，然而并不适用，里面的submit上面的click方法是发送另外一个请求

 <form class="addVersion" v-if="addShow" :action="addUrl" method="POST" enctype="multipart/form-data" id="formdata">
        <div class="addTitle">
            <span v-if="addVersionShow" >添加项目名称</span>
            <span v-else>修改项目名称</span>
            <i @click="handaddClose">X</i>
        </div>
        <div class="addContent">
          <div class="nodemes">
            <span>项目名称:</span>
            <el-input class="addinput" v-model="addprojectName" size="small" :maxLength=32 @keyup.native="versionName(addprojectName)" v-if="addVersionShow" placeholder="请输入"></el-input> 
            <el-input class="addinput" v-model="editprojectName" size="small" :maxLength=32 @keyup.native="versionName(editprojectName)" v-else placeholder="请输入"></el-input>
          </div>
          <input type="hidden" v-if="addVersionShow" name="listId" value="-1"/>
          <input type="hidden" v-if="addVersionShow" name="versionName" :value="inputtxt">
          <input type="hidden" v-if="addVersionShow" name="basicName" :value="inputzip">
          <div class="nodemes">
                 <span>项目版本:</span>
                 <el-input v-model="addprojectVersion" class="addinput" :maxLength=18 @keyup.native="versionName(addprojectVersion)"  v-if="addVersionShow" size="small"></el-input>
                 <el-input v-model="editprojectVersion" class="addinput" :maxLength=18 @keyup.native="versionName(editprojectVersion)"  v-else  size="small"></el-input>
          </div>
          <div class="nodemes">
                  <span>版本文件:</span>    
            <div class="noderight">
               <input class="upload" type="text" :value="inputtxt" v-if="addVersionShow" disabled>
               <input class="upload" type="text" :value="editimgtxt" :title="editimgtxt" v-else disabled>
               <a href="javascript:;" class="file">浏 览
              <input  v-if="addVersionShow" type="file" name="multipartfile" @change="inputshowtext($event)" style="cursor: pointer">
              <input  v-else type="file" name="multipartFile"  disabled style="cursor: not-allowed">
             </a>
           </div> 
            <dl style="display: inline-block;color:red" v-if="addVersionShow && txtarr">此文件必须以.txt结尾</dl>
          </div>
      <div class="nodemes"> 
            <span>版本基础包:</span>
            <div class="noderight">
             <input class="upload" type="text" :value="inputzip" v-if="addVersionShow" disabled>
             <input class="upload" type="text" :value="editimgzip" :title= "editimgzip" v-else disabled>
             <a href="javascript:;" class="file" :style="addVersionShow ? 'cursor: pointer' : 'cursor: not-allowed' ">浏 览
             <input  v-if="addVersionShow" type="file" name="multipartfile" @change="inputshowzip($event)"  style="cursor: pointer">
             <input  v-else type="file" name="multipartFile"  disabled style="cursor: not-allowed;">
           </a>
           </div>
           <dl style="display: inline-block;color:red" v-if="addVersionShow && ziparr">此文件必须以.zip结尾</dl>
      </div>
        </div>
        <div class="addSure">
        <input type="submit"  @click="handleAddVersion('',$event)" v-if="addVersionShow" value="确定" style="background: rgba(56, 161, 255, 0.7) !important;
        border: 0;
        border-radius: 4px;
        width: 0.65rem;
        height: 0.28rem;
        text-align: center;
        font-size: 0.14rem;
        color: #666666;
        line-height: 0.2rem;
        margin-left: 0.2rem;
        color: #fff;">
            <button @click="handleEditVersionSure" v-else>确定</button>
            <button @click="handaddClose('',$event)">取消</button>
        </div>
      </form>

解决方案

写个隐藏的iframe，form加个target属性，值为iframe的name的值

<form action="url" method="post" target="iframe">  
    <input type="submit" id="submit" name="submit" value="提交" />  
</form>  
  
<iframe id="frame" name="iframe" style="display:none;"></iframe>  

这篇关于javascript - 怎么能阻止表单提交跳转到action地址，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！