Question

我试图通过AJAX将DTO对象发送到我的控制器，但我不知道如何发送一个对象，这是我的DTO的一个字段，因为我只能发送对象的id ...

我的DTO是

public class ReservationDTO {


    private Plate plate;

    @Temporal(TemporalType.TIMESTAMP)
    @DateTimeFormat(pattern="dd/MM/yyyy HH:mm")
    @NotNull
    private Date fromDate;

    @Temporal(TemporalType.TIMESTAMP)
    @DateTimeFormat(pattern="dd/MM/yyyy HH:mm")
    @NotNull
    private Date toDate;

    private Park park;

    //getters and setters

然后我有一个表格，选择选择板

     <form th:action="@{/book/new}" method="POST"
        th:object="${reservation}"
        id="form-signin">
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="plate" th:text="#{reservation.plate }">Targa</label>
<div class="col-sm-4 input-group">
<select th:type="*{plate}" class="form-control" th:field="*{plate.plateId}">
<option th:each="p : ${plates}" th:value="${p.plateId}" th:text="${p.plateNumber}">Opzione</option>
</select>
</div>
</div>
<div class="row form-group"> <label class="col-sm-2 col-form-label" for="fromDate" th:text="#{reservation.from }"> </label>
                <div class="col-sm-4 input-group" id="datetimepicker2">
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"> </i>
                    </div>

        <input type="text" th:field="*{fromDate}" />
                                                </div>
                                            </div>
     <div class="row form-group">
    <label class="col-sm-2 col-form-label" for="toDate" th:text="#{reservation.to }"> </label>
    <div class="input-group col-sm-4" id="datetimepicker3">
    <div class="input-group-addon">
    <i class="fa fa-calendar"> </i>
     </div>
    <input type="text" th:field="*{toDate}" />
    </div>
    </div>
    <div class="row col-sm-4">
     <button type="submit" class="btn btn-success" th:text="#{reservation.getPrice}" id="priceButton">Conferma</button>
       </div>
            </form>

将表单数据发送到控制器的脚本：

$(function() {
        $('#form-signin').submit(function(event) {
            event.preventDefault(); 

            var reservationJson = $('#form-signin').serialize();
            console.log(reservationJson);
            $.ajax({
                type: "POST",
                url: "/book/getPrice",
                data: reservationJson,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data){
                     console.log(data);
                }
            });
            return false;
        });
    });

我想在我的控制器中有这个

public ResponseEntity<Integer> getReservationPrice(@RequestBody ReservationDTO dto){
// operations....

提交表格我

plate.plateId=40&fromDate=26%2F04%2F2017+12%3A48&toDate=27%2F04%2F2017+12%3A49

这显然不是ReservationDTO对象

Answer 1

我会用以下方式做事

HTML表格：

<form th:action="@{/book/new}" method="POST"
   th:object="${reservation}"
   id="form-signin">
   <div class="form-group row">
      <label class="col-sm-2 col-form-label" for="plate" th:text="#{reservation.plate }">Targa</label>
      <div class="col-sm-4 input-group">
         <select th:type="*{plate}" class="form-control" th:field="*{plate.plateId}" id="selectedPlate">
            <option th:each="p : ${plates}" th:value="${p.plateId}" th:text="${p.plateNumber}">Opzione</option>
         </select>
      </div>
   </div>
   <div class="row form-group">
      <label class="col-sm-2 col-form-label" for="fromDate" th:text="#{reservation.from }"> </label>
      <div class="col-sm-4 input-group" id="datetimepicker2">
         <div class="input-group-addon">
            <i class="fa fa-calendar"> </i>
         </div>
         <input type="text" th:field="*{fromDate}" id="fromDate" />
      </div>
   </div>
   <div class="row form-group">
      <label class="col-sm-2 col-form-label" for="toDate" th:text="#{reservation.to }"> </label>
      <div class="input-group col-sm-4" id="datetimepicker3">
         <div class="input-group-addon">
            <i class="fa fa-calendar"> </i>
         </div>
         <input type="text" th:field="*{toDate}" id="toDate" />
      </div>
   </div>
   <div class="row col-sm-4">
      <button type="submit" class="btn btn-success" th:text="#{reservation.getPrice}" id="priceButton">Conferma</button>
   </div>
</form>

然后JS：

$(function() {
        $('#form-signin').submit(function(event) {
            event.preventDefault(); 
        var dati = new Object();
        dati.fromDate = $("#fromDate").val();
        dati.toDate = $("#toDate").val();
            var selectedPlate = new Object();
            selectedPlate.id = $("#selectedPlate").val();
            selectedPlate.name = $("#selectedPlate").text();
            dati.plate = selectedPlate;
        dati.park = null;
            $.ajax({
                type: "POST",
                url: "/book/getPrice",
                data: JSON.stringify(dati),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data){
                     console.log(data);
                }
            });
            return false;
        });
    });

应该没问题，并创建一个正确的JSON结构

安吉洛

<强>更新

$(function() {
            $('#form-signin').submit(function(event) {
                event.preventDefault(); 
            var dati = new Object();
            dati.fromDate = $("#fromDate").val();
            dati.toDate = $("#toDate").val();
                var selectedPlate = new Object();
                selectedPlate.id = $("#selectedPlate").val();
                selectedPlate.name = $("#selectedPlate option:selected").text();
                dati.plate = selectedPlate;
            dati.park = null;
                $.ajax({
                    type: "POST",
                    url: "/book/getPrice",
                    data: JSON.stringify(dati),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(data){
                         console.log(data);
                    }
                });
                return false;
            });
        });

Answer 2

我找到了一种更简单的方法来实现这一目标。无需将对象作为JSON传递，您只需使用form.serializeArray()作为数据并在控制器中使用@ModelAttribute。这样的事情应该可以解决问题。

jQuery

$.ajax({
    url: "/book/getPrice",
    data: $('#form-signin').serializeArray(),
    type: "POST",
    success: function() { ... }
});

控制器

@RequestMapping("/book/getPrice")
@ResponseBody
public ResponseEntity<Integer> getReservationPrice(@ModelAttribute ReservationDTO dto) { 
    // Operations. 
}

注意：请记住将@ResponseBody批注添加到控制器的方法中。

Spring和AJAX表单 - 如何发送对象字段

2 个答案: