vuejs 如何实现表单提交后跳转到指定页面
发布于 8 年前 作者 ouyangxuanyun 28053 次浏览 来自 问答

刚刚学习vuejs框架，前后端分离，后端提供rest接口。之前没分离的时候页面A表单post数据到rest接口127.0.0.1/API/a, 后台处理(用的express框架，router.get(127.0.0.1/API/a ········))然后一个res.redirect 就可以跳转到提示操作成功的页面，但是前后端分离之后页面A表单post数据到rest接口之后后台就不应该再res.redirect 来实现跳转到成功提示页面了吧？是不是应该在前端vuejs实现把表单提交到后台resut 接口 然后跳转到成功提示页面？ 那应该如何实现呢？ 表单的action 写的是rest接口127.0.0.1/API/a，但是提交成功页面地址肯定不是127.0.0.1/API/a啊

希望大家的帮助，提供提供思路或者例子，谢谢！

3 回复

html

        <form v-if="!$store.state.authUser" @submit.prevent="login">
            <p class="error" v-if="formError">{{ formError }}</p>
            <p><i>To login, use <b>demo</b> as username and <b>demo</b> as password.</i></p>
            <p>Username: <input type="text" v-model="formUsername" name="username" required="required"/></p>
            <p>Password: <input type="password" v-model="formPassword" name="password" required="required"/></p>
            <p>Captcha: <input type="number" v-model="formCaptcha" name="captcha" autocomplete="off" required="required"/></p>
            <p v-if="captcha" v-html="captcha" v-on:click="refresh"></p>
            <button type="submit">Login</button>
        </form>

js

  methods: {
    login () {
      this.$store.dispatch('login', {
        username: this.formUsername,
        password: this.formPassword,
        captcha: this.formCaptcha
      })
        .then(() => {
          this.formUsername = '';
          this.formPassword = '';
          this.formCaptcha = '';
          this.formError = null;
          self.$router.replace({ path: 'admin' })
		  // window.location.href 也是可以的 看你有没有用vue-router
        })
        .catch((e) => {
          this.formError = e.message
        })
    },

store

  actions: {
    login ({ commit }, { username, password, captcha }) {
      return axios.post('/api/login', {
        username,
        password,
        captcha
      })
        .then((res) => {
          commit('SET_USER', res.data)
        })
        .catch((error) => {
          if (error.response.status === 401) {
            throw new Error(error.response.data.error)
          }
        })
    },

当然，你不用vuex的话，发请求直接写在methods里面就可以了

谢谢您的例子，没用vuex, @submit.prevent=“login” 中用vue-router 发送请求， 但是我表单里面的数据要如何发送到/API/a呢 是要自己在/API/a 后面添加查询参数吗 比如表单有数据data1,data2,data3, 我需要在输入框input里面绑定我vue里面的data字段，然后把请求地址改成/API/a?data1=data1&data2=data2&data3=data3 吗 ？ 但是我有20多个输入字段，这样有点麻烦，有别的方法吗 多谢多谢！！

methods: {
  login() {
    this.$http.post('/API/a')
      .then(function (response) {
        if (response.status == 200) {
          this.$router.replace({ path: '/PageB'})
        }
      })
  }
}

自己回复一下， 1楼方法的思路，获取表单数据直接用jquery就好， $("#formid").serialize() 获取后可以直接添加到url后面或者其他方法，获取表单数据也可以用DataForm，API介绍见https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData 但是浏览器的兼容性需要考虑 有更好的方式欢迎大家留言，暂时结贴

回到顶部