您可以使用 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>
在這個示例中,我們首先創建一個包含輸入字段和提交按鈕的表單。提交按鈕使用 type="button"
,而不是默認的 type="submit"
,以防止表單默認的刷新行為。
當用戶點擊提交按鈕時,submitForm()
函數會被調用。該函數首先獲取表單元素,然后使用 FormData
對象將表單數據序列化。接著使用 fetch
方法向指定的 API 端點發起 POST 請求,將表單數據作為請求體發送。
最后,我們可以使用 .then()
方法處理 API 響應,并使用 .catch()
方法處理任何可能的錯誤。
請確保將 your-api-endpoint
替換為您實際的 API 地址。