vue中的formmethod="post"無法POST

我正在嘗試制作一個網站，讓用戶可以使用給定的密碼和時間段預訂座位。我制作了一個表格，用戶應在其中輸入密碼和姓名，然后提交表格以進行預訂。我遇到的問題是，如果我在表單中使用 get 方法，它會添加一個 ? 到我不想要的 URL。單擊按鈕后，它應該簡單地在資料庫中創建一個條目并將用戶重定向到 HomeView。繞過？問題我想在表單中使用 post 方法，但是如果我這樣做，我會不斷收到錯誤“無法 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 方法表單起作用？

uj5u.com熱心網友回復：

您正在使用默認的 HTML 表單提交。該POST方法用于將表單資料發送到服務器。
當您使用 JavaScript 時，這些都不需要，尤其是 Axios。

提交處理程式采用event您應該使用的引數來阻止自動 HTML 提交：

event.preventDefault()

之后，您可以使用任何 HTTP 庫來發揮您的魔力。

標籤：

上一篇：如何禁用下拉選擇？

下一篇：在螢屏頂部添加3個徽標