html form js提交
时间: 2023-08-13 14:46:56 浏览: 45
您可以通过以下步骤使用 JavaScript 提交 HTML 表单:
1. 获取表单元素:使用 `document.getElementById()` 或 `document.querySelector()` 获取表单元素。
2. 添加事件监听器:使用 `addEventListener()` 方法将表单提交事件与提交函数关联起来。
3. 编写提交函数:在提交函数中,使用 `XMLHttpRequest` 对象或 `fetch()` 方法将数据发送到服务器。
下面是一个简单的示例代码:
```html
<form id="myForm">
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
<button type="submit">Submit</button>
</form>
<script>
const form = document.getElementById("myForm");
form.addEventListener("submit", submitForm);
function submitForm(event) {
event.preventDefault();
const formData = new FormData(form);
fetch("https://example.com/submit", {
method: "POST",
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
}
</script>
```
在这个示例中,我们使用 `fetch()` 方法将表单数据作为 `FormData` 对象发送到服务器,并使用 `then()` 方法处理响应。注意,在提交函数中,我们使用 `event.preventDefault()` 阻止表单默认的提交行为,因为我们要使用 JavaScript 提交表单。