前端form表单提交设置请求头
时间: 2023-10-18 20:20:35 浏览: 109
在前端使用表单提交时,可以通过设置请求头来传递一些额外的信息。具体方法如下:
1. 创建一个表单元素,并设置其属性和值:
```html
<form id="myform" action="/submit" method="POST">
<input type="text" name="username"/>
<input type="password" name="password"/>
<button type="submit">提交</button>
</form>
```
2. 在 JavaScript 中获取该表单元素,并添加一个事件监听器,用于在提交表单时设置请求头:
```javascript
const form = document.getElementById('myform');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
const xhr = new XMLHttpRequest();
xhr.open('POST', '/submit');
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
// 获取表单数据
const data = {
username: form.elements.username.value,
password: form.elements.password.value
};
// 发送数据
xhr.send(JSON.stringify(data));
});
```
上述代码中,我们在提交表单时阻止了默认的提交行为,并创建了一个 XMLHttpRequest 对象,通过 `xhr.setRequestHeader()` 方法设置了一个名为 `Content-Type` 的请求头,它的值为 `application/json`。最后,我们将表单数据转换为 JSON 字符串,并通过 `xhr.send()` 方法发送给服务器。