AJax表单提交

Ajax表单提交通常是使用JavaScript、XMLHttpRequest或Fetch API来异步向服务器发送数据，而不是传统的页面刷新。以下是使用原生JavaScript实现Ajax表单提交的示例代码：

HTML 部分：

<form id="myForm">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <button type="submit">Submit</button>
</form>
<div id="status"></div>

JavaScript 部分：

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
 
  var formData = new FormData(this); // 创建FormData对象
 
  var xhr = new XMLHttpRequest(); // 新建XMLHttpRequest对象
  xhr.open('POST', '/submit-form', true); // 初始化请求
 
  xhr.onload = function() {
    if (this.status == 200) {
      // 请求成功
      document.getElementById('status').innerHTML = this.responseText;
    } else {
      // 请求出错
      document.getElementById('status').innerHTML = 'Error: ' + this.status;
    }
  };
 
  xhr.send(formData); // 发送请求
});

在这个例子中，我们为表单添加了一个事件监听器来处理提交事件。我们阻止了表单的默认提交行为，并且使用XMLHttpRequest对象异步发送数据到服务器。服务器的响应会被捕获并显示在页面上的<div id="status"></div>元素中。这里的/submit-form是服务器端处理表单数据的路径，你需要根据实际情况进行替换。