表单method=" POST“在vue中不能发布

Question

我试图建立一个网站，让用户保留一个给定的密码和时间段的座位。我制作了一个表单，用户应该输入密码和他们的名字，然后提交表单进行预订。我遇到的问题是，如果我以这种形式使用get方法，它会添加一个？我不想要的网址。单击按钮后，应该在数据库中创建一个条目，并将用户重定向到HomeView。绕道而行？我在表单中使用post方法发现了问题，但是如果这样做，我就会得到“无法发布/”的错误。我找了很远很远的地方，显然我必须找个地方指定职位，但是在哪里？

<form @submit="reserve" method="post" action="">
   <fieldset>
    <div class="mainmiddle">
      <a id="Header">Wählen Sie Ihre Einstellungen für die Reservierung:</a>
      <div id="settings" v-bind:key="this.$seat.seat.seatNumber">
        <a id="seatNumber">Sitz-Nummer: {{ this.seatNumber }}</a><br>
        <div id="time">
          <label for="daySuggestion">Tag:</label>&nbsp;
          <input v-on:click="setMinDateToday" v-model="dateOfReservation" type="date" id="daySuggestion">
          <label for="fromSuggestion">Von:</label>&nbsp;
          <input v-model="startTimeOfReservation" type="time" id="fromSuggestion">
          <label for="untilSuggestion">Bis:</label>&nbsp;
          <input v-model="endTimeOfReservation" type="time" id="untilSuggestion">
        </div>
        <input id="password" placeholder="Passwort" type="password" v-model="password" v-on:keyup="validatePassword" required/><br>
        <div id="passwordDiv">
          <input id="passwordAgain" placeholder="Passwort wiederholen" type="password" v-model="passwordAgain" v-on:keyup="validatePassword" required/>
          <span id='message'></span>
          <input id="showPassword" type="checkbox" v-on:click="showPassword"/>&nbsp; Passwort anzeigen
        </div>
        <label id="anonymLabel">Anonym reservieren:</label>
        <input id="anonym" type="checkbox" v-model="anonym"><br>
        <input id="nameReservingPerson" type="text" placeholder="Name..." v-model="nameReservingPerson" required/>

      </div>

      <div id="footer">
        <button type="submit" class="bottomButtons">Jetzt Reservieren</button>
        <button class="bottomButtons" v-on:click="goPrev">Abbrechen</button>
      </div>
    </div>
  </fieldset>
</form>

这是我提交表单时被调用的保留方法。

reserve() {
      axios.post(`${config.apiBaseUrl}/seat/reserve/`,
          {
            seatNumber: this.seatNumber,
            password: this.password,
            anonym: this.anonym,
            nameReservingPerson: this.nameReservingPerson,
            reservedAt: {
              fromDate: Date.parse(this.dateOfReservation +" "+ this.startTimeOfReservation),
              untilDate: Date.parse(this.dateOfReservation +" "+ this.endTimeOfReservation),
            }
          },
          {
            headers: {
              'Content-Type': 'application/json',
              'Character-Encoding': 'utf-8',
            }
          }
      )
          .then(() => {
            alert("Der Platz wurde Erfolgreich Reserviert!")
            this.$router.push({path: '/'});
          })
          .catch(() => {
            alert("Der Platz wurde !NICHT! Erfolgreich Reserviert!")
          });
    },

一切都已经用了get方法的形式，但我只是不能绕开？问题来了。如何才能使post方法表单工作？

Answer 1

您正在使用默认的HTML表单提交。POST方法用于将表单数据发送到服务器。

当您使用JavaScript (特别是Axios )时，不需要这些。

提交处理程序接受event参数，您应该使用该参数来防止自动提交：

event.preventDefault()

在此之后，您可以使用任何HTTP库执行您的魔术。