如何在不刷新頁面的情況下提交form表單

您可以使用 JavaScript 來在不刷新頁面的情況下提交表單。以下是一個示例代碼：

<form id="myForm">
  <input type="text" name="name" placeholder="Name">
  <input type="email" name="email" placeholder="Email">
  <button type="button" onclick="submitForm()">Submit</button>
</form>

<script>
function submitForm() {
  var form = document.getElementById("myForm");
  var formData = new FormData(form);

  fetch("your-api-endpoint", {
    method: "POST",
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // Add code here to handle the response data
  })
  .catch(error => {
    console.error(error);
    // Add code here to handle any errors
  });
}
</script>

在這個示例中，我們首先創(chuàng)建一個包含輸入字段和提交按鈕的表單。提交按鈕使用 type="button"，而不是默認(rèn)的 type="submit"，以防止表單默認(rèn)的刷新行為。

當(dāng)用戶點(diǎn)擊提交按鈕時，submitForm() 函數(shù)會被調(diào)用。該函數(shù)首先獲取表單元素，然后使用 FormData 對象將表單數(shù)據(jù)序列化。接著使用 fetch 方法向指定的 API 端點(diǎn)發(fā)起 POST 請求，將表單數(shù)據(jù)作為請求體發(fā)送。

最后，我們可以使用 .then() 方法處理 API 響應(yīng)，并使用 .catch() 方法處理任何可能的錯誤。

請確保將 your-api-endpoint 替換為您實(shí)際的 API 地址。