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

Posted 2023-02-22

【中文标题】从api设置值后如何自动提交表单

【英文标题】：How to auto submit form after values are set from api

【发布时间】：2021-12-31 07:40:37

【问题描述】：

调用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>

【问题讨论】：

有什么问题？你有错误吗？还是别的什么？

@MahEs 我已经用错误详情更新了问题，希望你能帮我检查一下

您的 axios 调用是否返回 200 ？你能提供你的回应日志吗？我不是usre，但我认为问题可能是您的axios url是本地url。

@MahEs axios 返回 200，如果我删除它，一切正常。$refs.form.submit();并手动点击

【参考方案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 是一个很好的解决方案。