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

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

jquery ajax spring

Jquery Spring和AJAX表单-如何发送对象字段,jquery,ajax,spring,Jquery,Ajax,Spring,我正试图通过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

我正试图通过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

然后我有一个表格，用一个select来选择盘子

     <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>

我想把这个放在我的控制器里

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

这显然不是对对象的保留，我将按以下方式执行

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>

它应该可以创建一个正确的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;
            });
        });

我找到了一个更简单的方法来实现这一点。您可以简单地使用

form.serializeArray（）

作为数据，而不是将对象作为JSON传递，并在控制器中使用

@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. 
}

@RequestMapping（“/book/getPrice”）
@应答器
公共响应getReservationPrice（@ModelAttribute ReservationDTO dto）{
//行动。
}

注意：请记住将

@ResponseBody

注释添加到控制器的方法中。

谢谢Angelo，但有些地方仍然不对劲。。。因为我用这种方式得到所有的盘子<“从日期上看，从日期上看，从日期上看，“26/04/04/2017年13:44，”到“27/04/2017 2017年13:45”的“板”上：{“id”的“41，”从“从日期上”的“从日期上”的“代码”的“26/04/04/04/04/2017年7“26/04/04/04/2017年13:44”的“44”的“45”的“45”的“45”上，以及“板：“““““：”的“id:“id”41”的“41”，“金属”的“41”，“金属”的“41”，“”，“金属”的“41”，“”，“41”，“名”的”的”的“41，”，”，”，”，”，”，”的“板“““““““““，，，，，，，，，，，，，，，，，，“41”，“名称“““““““““““““““，，，，，，，，，，”11111\n\t\t\t\t\t\t\t\t\t\t“}@besmart sourry我错了。你应该使用

$（“#selectedPlate option:selected”）.text（）

来获取所选板的文本。如果可以，请告诉我。同时我会更新答案。你应该在selectedPlate上添加选项：selected。id=$（“#selectedPlate”）.val（）；以完成。再次感谢

$(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;
            });
        });

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

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