从api设置值后如何自动提交表单

Question

调用api后设置from值后如何自动提交表单

我希望表单在从 api 成功获取值后自动提交，

我使用了 $refs.form.submit()，但是，它没有按预期工作，

一个请求被发送到：http://localhost:3200/login-saml (FE)

虽然预期的 url 是：localhost:8080/login (BE)

这是我所有的代码：

<template>
  <!-- Sing in  Form -->
  <section class="sign-in" style="padding-top: 65px">
    <div class="container">
      <form v-bind:action="urlLogin" method="post" ref="form">
        <input type="text" id="SAMLRequest" name="SAMLRequest" v-model="SAMLRequest">
        <input type="submit" value="Submit">
      </form>
    </div>
  </section>
</template>

<script>
import axios from 'axios';

export default {
  name: 'LoginPage',
  data() {
    return {
      urlLogin: '',
      SAMLRequest: ''
    }
  },
  mounted() {
    axios.get(`http://localhost:8080/rest/v2/sso/loginInfo`)
        .then(response => {
          this.urlLogin = response.data.urlLogin;
          this.SAMLRequest = response.data.samlrequest;
          this.$refs.form.submit();
        })
        .catch(e => {
          console.log(e)
        })
  }
}
</script>

Answer 1

我认为您遇到问题的原因是您在表单中设置的action 属性。我不知道您网站的后端结构（它是node-js 或php 或...），但是当您在项目中使用axios 时，实际上您不需要使用正常表单提交方式（使用:action 和提交按钮提交表单）。您可以借助 axios 方法来处理它。这是我使用 vue 组件提交表单（例如注册表单）的一种方式：

<template>
  <!-- Sing in  Form -->
  <section>
    <div>
        <form method="post">
            <label for="usernameId">username:</label>  
            <input type="text" id="usernameId" name="username" v-model="username">

            <label for="emailId">email:</label>  
            <input type="email" id="emailId" name="email" v-model="email">

            <label for="passwordId">password:</label>  
            <input type="password" id="passwordId" name="password" v-model="password">

            <button type="button" @click="postData">Submit</button>
        </form>
    </div>
  </section>
</template>

<script>
import axios from 'axios';

export default {
  name: 'formCompo',
  data() {
    return {
      username: '',
      email: '',
      password: ''
    }
  },

  methods: {
      postData: function() {
        let postVar = {
            username: this.username,
            email: this.email,
            password: this.password
        };
        /* put your back-end url in axios.post() for example http://localhost:3200/saml-... */
        axios.post(`http://localhost:8080/stack-overflow/axios-test/datafind.php`, postVar).then((result) => {
            console.log(result);
        }).catch(err => {
            console.error(err);
        });
      }
  },

  mounted() {
    /* put the url that you want to get data from back-end in post.get() */
    axios.get(`http://localhost:8080/stack-overflow/axios-test/dataGet.php`)
        .then(response => {
          console.log(response.data);
          this.username = response.data.username;
          this.email = response.data.email;
          this.password = response.data.password;
          this.postData();
        })
        .catch(e => {
          console.log(e)
        })
        
  }
}
</script>

您可以在上面的代码中只注释<form> 标记，以查看它是否可以再次正常工作而没有任何问题。在上面的代码中，我使用 postData 方法通过 axios 将数据发布到后端。当按钮被点击或在mounted() 钩子中时，可以调用这个方法。如果您在项目中使用此方法，则不需要使用urlLogin 数据，但您可以定义使用自动提交（在挂载钩子中）或使用按钮提交数据时的条件。如果您使用了我发布的脚本并且您的问题仍然存在，我想问题来自CORS policy，它有自己的解决方案取决于您的后端结构。例如，如果您在后端使用php，我认为this question 是一个很好的解决方案。