如何将html表单中的值导入ajax

<form id="myForm">
  <!-- 表单元素 -->
  <input type="text" name="username" id="username" />
  <input type="password" name="password" id="password" />
  <input type="submit" value="提交" />
</form>

function submitForm() {
  // 阻止表单默认的提交行为
  event.preventDefault();
  
  // 获取表单元素的值
  var username = document.getElementById('username').value;
  var password = document.getElementById('password').value;
  
  // 创建一个XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  
  // 设置请求方法和URL
  xhr.open('POST', '/api/submit', true);
  
  // 设置请求头
  xhr.setRequestHeader('Content-Type', 'application/json');
  
  // 处理服务器响应
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        // 请求成功处理逻辑
        console.log(xhr.responseText);
      } else {
        // 请求失败处理逻辑
        console.error('请求失败: ' + xhr.status);
      }
    }
  };
  
  // 发送请求并将表单值作为参数传递
  xhr.send(JSON.stringify({ username: username, password: password }));
}

<script>
  document.getElementById('myForm').addEventListener('submit', submitForm);
</script>