ajax表单提交 json数据格式

AJAX是一种前端技术，可以使得在不刷新页面的情况下向后台发送请求和获取数据。表单提交是使用AJAX技术的一种常见场景，特别是在需要提交复杂数据格式时。本文将介绍使用JSON数据格式提交表单数据。

// HTML代码
<form id="myForm" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br>
  <label for="age">年龄：</label>
  <input type="text" id="age" name="age"><br>
  <button type="button" onclick="submitForm()">提交</button>
</form>

// JavaScript代码
function submitForm() {
  var form = document.getElementById("myForm");
  var formData = new FormData(form);
  var json = {};
  formData.forEach(function(value,key){
    json[key] = value;
  });
  var request = new XMLHttpRequest();
  request.open("POST","/api/submit");
  request.setRequestHeader("Content-Type","application/json");
  request.onload = function() {
    if (request.status === 200) {
      // 处理返回的数据
    } else {
      alert("提交失败");
    }
  };
  request.send(JSON.stringify(json));
}

以上代码中，首先获取表单数据并把它转换为JSON格式，使用XMLHttpRequest对象发送POST请求，并设置请求头为Content-Type: application/json，这样后台服务器就知道接收到的数据格式是JSON。接收到数据后，后台服务器可以将JSON数据解析成对象。