JS表單提交的方法有以下幾種常見的方式：使用form元素的submit()方法、使用AJAX進(jìn)行異步提交以及使用fetch API進(jìn)行異步提交。
- 使用form元素的submit()方法：
可以通過調(diào)用form元素的submit()方法來提交表單。該方法將觸發(fā)表單的submit事件，讓瀏覽器執(zhí)行表單的默認(rèn)提交行為。
代碼示例：
<form id="myForm" action="submit.php" method="POST">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" value="提交" />
</form>
<script>
const form = document.querySelector('#myForm');
form.addEventListener('submit', (e) => {
e.preventDefault(); // 阻止表單的默認(rèn)提交行為
// 進(jìn)行表單驗(yàn)證
// ...
// 提交表單
form.submit();
});
</script>
登錄后復(fù)制
- 使用AJAX進(jìn)行異步提交：
通過使用XMLHttpRequest或者jQuery的$.ajax()等相關(guān)技術(shù)，可以通過異步請(qǐng)求將表單數(shù)據(jù)提交到服務(wù)器，并接收服務(wù)器的響應(yīng)。
代碼示例-使用原生的XMLHttpRequest：
<form id="myForm" action="submit.php" method="POST">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" value="提交" />
</form>
<script>
const form = document.querySelector('#myForm');
form.addEventListener('submit', (e) => {
e.preventDefault(); // 阻止表單的默認(rèn)提交行為
// 進(jìn)行表單驗(yàn)證
// ...
// 構(gòu)造請(qǐng)求對(duì)象
const xhr = new XMLHttpRequest();
xhr.open('POST', 'submit.php', true);
// 設(shè)置請(qǐng)求頭
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 監(jiān)聽請(qǐng)求狀態(tài)
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText);
}
};
// 發(fā)送請(qǐng)求
xhr.send(new FormData(form));
});
</script>
登錄后復(fù)制
- 使用fetch API進(jìn)行異步提交：
通過使用fetch API，可以在發(fā)送請(qǐng)求之前對(duì)請(qǐng)求進(jìn)行一些處理，并將請(qǐng)求和響應(yīng)包裝成Promise對(duì)象，更加高效地進(jìn)行異步操作。
代碼示例：
<form id="myForm" action="submit.php" method="POST">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" value="提交" />
</form>
<script>
const form = document.querySelector('#myForm');
form.addEventListener('submit', (e) => {
e.preventDefault(); // 阻止表單的默認(rèn)提交行為
// 進(jìn)行表單驗(yàn)證
// ...
// 構(gòu)造請(qǐng)求參數(shù)對(duì)象
const formData = new FormData(form);
// 發(fā)起fetch請(qǐng)求
fetch('submit.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.log(error));
});
</script>
登錄后復(fù)制
以上是JS中常見的表單提交方法，可以根據(jù)實(shí)際需要選擇適合的方法進(jìn)行表單提交。
