表单附加其他数据字段并通过 AJAX 发送

当我们需要在表单中附加一些其他的数据字段（比如登录态、用户信息等），并且使用 AJAX 请求发送表单时，可以采用以下解决方案：

1. 通过 FormData 对象附加数据

通过 FormData 对象可以方便地将表单的数据进行序列化，并且可以在序列化过程中附加其他的数据字段。示例如下：

const formData = new FormData();
formData.append('username', 'test');
formData.append('password', '123456');
formData.append('token', 'xxxxx'); // 附加一个名为 token 的数据字段

fetch('/api/login', {
  method: 'POST',
  body: formData,
})
  .then(response => {
    // 处理响应结果
  })
  .catch(error => {
    // 处理异常情况
  });

2. 通过 XMLHttpRequest 对象附加数据

如果我们使用 XMLHttpRequest 对象发送 AJAX 请求，也可以使用 FormData 对象进行数据的附加。示例如下：

const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append('username', 'test');
formData.append('password', '123456');
formData.append('token', 'xxxxx'); // 附加一个名为 token 的数据字段

xhr.open('POST', '/api/login');
xhr.send(formData);

3. 在表单中添加隐藏域

除了使用 FormData 对象进行数据附加外，我们还可以在表单中添加隐藏域来实现。隐藏域可以用来存储一些不需要用户交互的数据，比如登录态、用户信息等。示例如下：

<form id="my-form" method="POST" action="/api/login">
  <input type="hidden" name="token" value="xxxxx" />
  <input type="text" name="username" />
  <input type="password" name="password" />
  <button type="submit">登录</button>
</form>

当用户提交表单时，隐藏域中的数据也会被一同提交到服务器端。在前端使用 AJAX 发送表单时，我们可以通过 FormData 对象将表单数据进行序列化并附加其他的数据字段，也可以使用 XMLHttpRequest 对象直接发送序列化后的表单数据，这样就可以轻松地实现表单附加其他数据字段并发送 AJAX 请求的需求。