通过form表单，ajax构造HTTP请求

在HTML中，您可以使用<form>元素创建表单，并使用JavaScript的FormData对象和XMLHttpRequest或fetch API来通过AJAX构造HTTP请求。以下是一个简单的示例：

HTML 部分：

<form id="myForm">
  <input type="text" name="username" placeholder="Enter username">
  <input type="password" name="password" placeholder="Enter password">
  <button type="submit">Submit</button>
</form>

JavaScript 部分 (使用 XMLHttpRequest):

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
 
  var formData = new FormData(this);
 
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/submit-form'); // 替换为您的URL
  xhr.onload = function() {
    if (this.status == 200) {
      console.log(this.response);
      // 处理成功的响应
    }
  };
  xhr.send(formData);
});

或者，使用 fetch API:

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
 
  var formData = new FormData(this);
 
  fetch('/submit-form', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
});

在这两个示例中，我们都阻止了表单的默认提交行为，并使用JavaScript代码通过AJAX向服务器发送POST请求。然后，服务器将处理这些数据并返回响应。