vue表单form提交阻止跳转页面

直接使用form的submit提交,页面会跳转,使用jquery-form阻止跳转

  1. 引入jquery-form
  • npm下载jquery-form

    npm install jquery-form --save
    
  • 在main.js中use

    import jqueryForm from 'jquery-form'
    Vue.use(jqueryForm)
    
  1. 使用
		
          <form id="uploadForm"  method="post" v-show="false" enctype="multipart/form-data" onsubmit="return false">
            <input type="file" id="fileInput" name="files" accept=".mdsql" @change="uploadModelFile($event)">
          form>

    uploadModelFile (event) {
     
      if ($('#uploadForm input').val() === '') {
     
        return
      }
      //let baseURL
      // 判断环境切换代理接口
      //if (process.env.NODE_ENV === 'development') {
     
        //baseURL = '/api/***'
      //} else {
     
        //baseURL = process.env.API_DOMAIN + '/***'
      //}
      let options = {
     
        clearForm: true, // 提交后清空表单
        url: baseURL, // 提交地址
        success: function (response) {
      
        	// 成功后函数
        }
      }
      $('#uploadForm').ajaxSubmit(options) // 使用ajaxSubmit提交
      return false // 如果是submit按钮提交记得e.preventDefault()阻止默认事件
    },

你可能感兴趣的:(原生js问题库,vue,forms)