Bdtjtk

I'm trying to send a DTO object via AJAX to my controller, but i don't know how to send an Object which is a field of my DTO because i can only send the id of the object...

My DTO is

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

Then I have a form, with a select to choose the Plate

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

The script to send form data to the controller:

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

        });

    });

I would like to have this in my controller

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

// operations....

Submitting the form i get

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

which obviously isn't a ReservationDTO object

I would do in the following way

HTML FORM:

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

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

        });

    });

It should be OK and create a correct JSON structure

Angelo

UPDATE

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

            });

        });

I found a much more simpler way to achieve this. Instead of passing the object as a JSON, you can simply use form.serializeArray() as your data and expect a @ModelAttribute in your controller. Something like this should do the trick.

jQuery

$.ajax({

    url: "/book/getPrice",

    data: $('#form-signin').serializeArray(),

    type: "POST",

    success: function() { ... }

});

Controller

@RequestMapping("/book/getPrice")

@ResponseBody

public ResponseEntity<Integer> getReservationPrice(@ModelAttribute ReservationDTO dto) { 

    // Operations. 

}

Note: Remeber to add the @ResponseBody annotation to your controller's method.