form表单提交数据的两种方式——submit直接提交、AJAX提交

<!-- 使用submit直接提交的HTML表单 -->
<form action="/submit-data" method="post">
  <input type="text" name="username" />
  <input type="email" name="email" />
  <input type="submit" value="Submit" />
</form>

// AJAX方式提交数据的示例代码
document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
 
  var formData = new FormData(this); // 创建FormData对象
 
  fetch(this.action, {
    method: this.method,
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
});

在这个例子中，我们使用了addEventListener来监听表单的submit事件，并在事件处理函数中使用event.preventDefault()阻止了表单的默认提交行为。然后，我们使用FormData收集表单数据，并通过fetch API以POST方法发送到服务器。服务器端应该能够处理这种AJAX提交的数据。