js提交表单
时间: 2023-07-23 20:10:51 浏览: 50
要使用 JavaScript 提交表单,可以使用 `submit()` 方法。以下是一个示例代码:
```javascript
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error('Error:', xhr.status);
}
}
};
xhr.open('POST', '/login');
const formData = new FormData(form);
xhr.send(formData);
});
```
在这个例子中,我们首先获取了表单元素,并为其添加了 `submit` 事件监听器。在事件处理程序中,我们先调用了 `preventDefault()` 方法,以阻止表单默认的提交行为。接着,我们创建了一个 `XMLHttpRequest` 对象,并定义了 `onreadystatechange` 回调函数。在回调函数中,我们判断了请求状态和响应状态码,并在控制台输出相应文本或错误信息。最后,我们使用 `open` 方法打开一个 POST 请求,并将表单数据作为参数传入 `send` 方法并发送请求。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)