帮我写一个使用JS submit提交事件的实例
时间: 2024-05-10 21:13:52 浏览: 80
当用户点击提交按钮时,会触发 submit 事件,可以利用JS来获取表单数据并提交表单。以下是一个使用JS submit提交事件的实例:
HTML代码:
```html
<form id="myForm" action="submit.php">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>
<button type="submit" id="submitBtn">提交</button>
</form>
```
JS代码:
```javascript
var form = document.getElementById("myForm");
var submitBtn = document.getElementById("submitBtn");
submitBtn.addEventListener("click", function(event) {
event.preventDefault(); // 阻止表单的默认提交行为
var formData = new FormData(form); // 获取表单数据
var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open("POST", form.action); // 设置请求方式和URL
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(formData); // 发送表单数据
});
```
以上代码可实现当用户点击提交按钮时,使用XMLHttpRequest对象将表单数据以POST方式提交到指定URL。
阅读全文