手动构建模型属性以提交给 spring 控制器

Question

我需要向这个控制器提交一个对象：

  @RequestMapping(value = "/insert_pedido", method=RequestMethod.POST)
  @ResponseBody
  public String insert_pedido(@RequestParam("cliente") Integer cliente_id, @ModelAttribute("pedido") Pedido pedido) throws JsonProcessingException {
...
  }

通过这样的javascript函数：

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

  var xhr = new XMLHttpRequest();
  xhr.open("POST", url_pedido, 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);
}

我需要在变量pedido 中构建控制器将由@ModelAttribute("pedido") Pedido pedido 读取的数据。这可能吗？如果是这样，我该怎么做？

需要添加到这个对象的字段是：

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

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

          <div class="form-group">
            <label for="dataCompra">dataCompra</label>
            <input type="date" name="dataCompra" class="form-control" id="dataCompra">
          </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" id="produtos" name="produtos">
              <option th:each="option : ${produtos}" th:value="${option.id}" th:text="${option.nome}"></option>
            </select>
          </div>
        </div>

更新

我试试这个：

  var pedido = new FormData();
  pedido.append('transactionId', document.getElementById('transactionId').value);
  pedido.append('metodoPagamento', document.getElementById('metodoPagamento').value);
  pedido.append('dataCompra', document.getElementById('dataCompra').value);
  pedido.append('produtos', document.getElementById('produtos').value);

我在数据库中保留了一个实体 pedido，但所有字段都为空。

即使在 javascript 代码中，如果我添加这个：

  console.log(' transactionId: '+document.getElementById('transactionId').value);
  console.log(' metodoPagamento: '+document.getElementById('metodoPagamento').value);
  console.log(' dataCompra: '+document.getElementById('dataCompra').value);
  console.log(' cliente: '+document.getElementById('cliente').value);
  console.log(' produtos: '+document.getElementById('produtos').value);

只有字段 dataCompra 和 cliente 获得正确的值。其他人正在获得null 价值。都是上面的html。

Answer 1

自从我使用 Spring 以来已经有一段时间了，但是这样的事情应该可以工作：

@PostMapping(
  value = "/insert_pedido", consumes = "application/json", produces = "application/json")
public String insert_pedido(@RequestBody Pedido pedido) {
    return pedidoService.insert(pedido);
}

对于客户端 js，遗憾的是，您需要手动从 DOM 获取 json 模型（因为您没有使用在 JS 中定义并应用于模板的表单或模型 ==> 虽然这是我的d建议你无论如何都要这样做）。

然后你只需执行 ajax 调用

var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
xmlhttp.open("POST", "/insert_pedido");
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.send(JSON.stringify({ ... })); // => Your json object here 

同时检查您的 Java 对象（getter 和 setter）的属性或使用像 lombok 这样的插件。
虽然它有点难看，但您的最后一次编辑确实是手动 dom 爬行。检查您的所有值是否已正确检索并通过网络发送（例如 Chrome 网络选项卡）。