我正在尝试保留以下字段的数据：

        <div class="form" id="inner-form">
          <div class="form-group">
            <label for="transactionId">transactionId</label>
            <input type="text" name="transactionId" class="form-control">
          </div>

          <div class="form-group">
            <label for="metodoPagamento">metodoPagamento</label>
            <input type="text" name="metodoPagamento" class="form-control">
          </div>

          <div class="form-group">
            <label for="dataCompra">dataCompra</label>
            <input type="date" name="dataCompra" class="form-control">
          </div>

          <input th:if="${command}" type="hidden" name="cliente" th:value="${command.id}">

          <div class="form-group">
            <label for="produtos">produtos</label>
            <select multiple="multiple" class="form-control" name="produtos">
              <option th:each="option : ${produtos}" th:value="${option.id}" th:text="${option.nome}"></option>
            </select>
          </div>

          <button type="button" class="btn btn-dark" id="btn_delete" th:attr="data-cliente=${cliente.id},data-url=@{/cliente/insert_pedido}" onclick="insert_pedido(this);">Aplicar</button>
        </div>

此控制器：

  @RequestMapping(value = "/insert_pedido",method=RequestMethod.POST)
  @ResponseBody
  public String insert_pedido(@RequestParam("cliente") Integer cliente_id,@ModelAttribute("pedido") Pedido pedido) throws JsonProcessingException {
    ObjectMapper mapper = new ObjectMapper();
    return mapper.writeValueAsString(this.serv.insert_pedido(cliente_id,pedido));
  }

通过此javascript代码：

function insert_pedido(e) {
  var cliente = e.dataset.cliente;
  var url = e.dataset.url;

  var pedido = new FormData();
  var form = document.getElementById('inner-form');

  var transactionId = form.querySelector('input[name=transactionId]').value;
  var metodoPagamento = form.querySelector('input[name=metodoPagamento]').value;
  var dataCompra = form.querySelector('input[name=dataCompra]').value;
  var produtos = form.querySelector('select[name=produtos]').value;

  pedido.append('transactionId',transactionId);
  pedido.append('metodoPagamento',metodoPagamento);
  pedido.append('cliente',cliente);
  pedido.append('dataCompra',dataCompra);
  pedido.append('produtos',produtos);

  var xhr = new XMLHttpRequest();
  xhr.open("POST",url,true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      ...
    }
  };
  formData = new FormData();
  formData.append("cliente",cliente);
  formData.append("pedido",pedido);
  xhr.send(formData);
}

在行var transactionId = form.querySelector('input[name=transactionId]').value上正确读取了数据，但是在浏览器网络标签中，参数pedido显示为FormData，尽管有一个新实体将保留在数据库中，所有字段均保留为空。

任何人都可以提示如何解决该问题？