Question

我正在尝试使用axios向我的API发送发布请求。我有一个HTML表单，用户可以在其中输入电子邮件和密码。发送请求后，我可以在chrome dev工具中看到请求的主体为空，因此我没有收到表单输入。我将不胜感激如何提取这些建议。

HTML表单

<modal name="modal-register" @opened="opened">
            <form @submit.prevent="doRegister">
                <div class="form-group">
                    <label for="email" class="block">Email</label>
                    <input type="email" id="email" name="email" class="border" ref="email">
                </div>
                <div class="form-group">
                    <label for="password" class="block">Password</label>
                    <input type="password" id="password" name="password" class="border">
                </div>
                <div class="form-group">
                    <button type="submit" @submit.prevent="doRegister">Register</button>
                </div>
            </form>
            <div class="form-group">
                <p>Already have an account? <a href="#">Login</a></p>
            </div>
            <div>
                <p v-if="success"> {{ success }}</p>
                <pre>{{ response }}</pre>
            </div>
        </modal>

Axios请求

doRegister() {
            axios({
                method: 'post',
                url: 'http://localhost:3001/wallets/signup',
                headers: {},
                data: {
                    email: this.email,
                    password: this.password
                }
            });
        }

当对数据块中的值进行硬编码时，请求工作正常，因此我只是不提取表单数据。我很难找到使用javascript执行此操作的示例，因为大多数人似乎都在使用php进行请求。

Answer 1

您可能必须将输入绑定到数据。因此，将v-model添加到输入并将它们绑定到您的首选数据键。例如this.email / this.password

<modal name="modal-register" @opened="opened">
  <form @submit.prevent="doRegister">
    <div class="form-group">
      <label for="email" class="block">Email</label>
      <input v-model="email" type="email" id="email" name="email" class="border" ref="email">
    </div>
    <div class="form-group">
      <label for="password" class="block">Password</label>
      <input v-model="password" type="password" id="password" name="password" class="border">
    </div>
    <div class="form-group">
      <button type="submit" @submit.prevent="doRegister">Register</button>
    </div>
  </form>
  <div class="form-group">
    <p>Already have an account? <a href="#">Login</a></p>
  </div>
  <div>
    <p v-if="success"> {{ success }}</p>
    <pre>{{ response }}</pre>
  </div>
</modal>

Answer 2

问题通过使用

解决了

email: document.getElementById('email').value,
password: document.getElementById('password').value

如何从HTML表单中提取输入以进行axios发布请求

2 个答案: