JS表单提交的方法有哪些

js表单提交的方法有哪些

JS表单提交的方法有以下几种常见的方式:使用form元素的submit()方法、使用AJAX进行异步提交以及使用fetch API进行异步提交。

  1. 使用form元素的submit()方法:
    可以通过调用form元素的submit()方法来提交表单。该方法将触发表单的submit事件,让浏览器执行表单的默认提交行为。

代码示例:

<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(); // 阻止表单的默认提交行为
// 进行表单验证
// ...
// 提交表单
form.submit();
});
</script>
  1. 使用AJAX进行异步提交:
    通过使用XMLHttpRequest或者jQuery的$.ajax()等相关技术,可以通过异步请求将表单数据提交到服务器,并接收服务器的响应。

代码示例-使用原生的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(); // 阻止表单的默认提交行为
// 进行表单验证
// ...
// 构造请求对象
const xhr = new XMLHttpRequest();
xhr.open('POST', 'submit.php', true);
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 监听请求状态
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText);
}
};
// 发送请求
xhr.send(new FormData(form));
});
</script>
  1. 使用fetch API进行异步提交:
    通过使用fetch API,可以在发送请求之前对请求进行一些处理,并将请求和响应包装成Promise对象,更加高效地进行异步操作。

代码示例:

<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(); // 阻止表单的默认提交行为
// 进行表单验证
// ...
// 构造请求参数对象
const formData = new FormData(form);
// 发起fetch请求
fetch('submit.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.log(error));
});
</script>

以上是JS中常见的表单提交方法,可以根据实际需要选择适合的方法进行表单提交。

原文来自:www.php.cn
© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容