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. 使用
		<!--此段html为示例,仅供参考-->
          <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()阻止默认事件
    },
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要编写一个包含表单提交跳转的微信小程序,可以使用以下步骤: 1. 在 WXML 文件中创建一个包含表单的页面。 例如,可以使用 `<form>` 标签来创建一个包含输入字段和提交按钮的表单,如下所示: ```html <form bindsubmit="onFormSubmit"> <input type="text" name="username" placeholder="用户名" /> <input type="password" name="password" placeholder="密码" /> <button type="submit">提交</button> </form> ``` 2. 在 JS 文件中编写表单提交处理程序。 当用户点击提交按钮时,可以调用 `bindsubmit` 属性指定的处理程序,并通过 `wx.request()` 函数将表单数据发送到服务器。在请求完成后,可以通过 `wx.navigateTo()` 函数跳转到下一个页面。 例如,可以编写以下处理程序: ```javascript Page({ onFormSubmit: function (event) { wx.request({ url: 'https://example.com/login', data: event.detail.value, method: 'POST', success: function () { wx.navigateTo({ url: '/pages/home/home', }) }, fail: function () { wx.showToast({ title: '登录失败,请重试', icon: 'none', }) }, }) }, }) ``` 3. 在 app.json 文件中注册下一个页面。 在跳转到下一个页面之前,需要在 `app.json` 文件中注册该页面。例如,可以添加以下代码: ```json { "pages": [ "pages/index/index", "pages/home/home" ], "window": { "navigationBarTitleText": "微信小程序" } } ``` 这将使页面 `/pages/home/home` 可以在小程序中被访问。 以上就是编写一个包含表单提交跳转的微信小程序的步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值