前后端交互之——AJAX提交

在前后端交互中，AJAX是一种非常常见的技术，它允许浏览器异步从服务器获取数据，而不会打断用户的操作。以下是一个使用AJAX提交表单数据的简单示例：

HTML部分：

<form id="myForm">
  <input type="text" name="username" placeholder="Enter username">
  <input type="password" name="password" placeholder="Enter password">
  <button type="button" onclick="submitForm()">Submit</button>
</form>

JavaScript部分：

function submitForm() {
  var formData = new FormData(document.getElementById('myForm'));
 
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/submit', true);
  xhr.onload = function() {
    if (this.status == 200) {
      console.log(this.response);
      // 处理返回的数据
    }
  };
  xhr.send(formData);
}

在这个例子中，我们定义了一个简单的表单，并为提交按钮添加了一个点击事件，该事件会触发submitForm函数。这个函数首先通过FormData对象获取表单数据，然后创建一个XMLHttpRequest对象，并设置相应的属性（如HTTP方法和要提交的URL）。最后，通过send方法发送表单数据到服务器。服务器端需要监听/submit路径，并处理POST请求。