java - 使用 Ajax 从 Spring Controller 加载 Modal 中的数据

Question

我两个月前刚刚开始使用 Spring，之前从未使用过 Ajax 或 JavaScript。所以我对此很陌生。我想要做的是从 Controller 中的 GET 方法加载数据，以将其填充到模态中。我为此使用ajax。基本上我做了这个家伙https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/是在做。但它不起作用。

希望有人能帮我解决这个问题。

这是我的 Controller :

@RequestMapping(path="/reservations/details/{reservationId}", method=RequestMethod.GET)
public @ResponseBody String getReservationDetails(@PathVariable("reservationId") String reservationId, Model model, Principal principal, HttpServletRequest request){
    LOGGER.info(LogUtils.getDefaultInfoStringWithPathVariable(request, Thread.currentThread().getStackTrace()[1].getMethodName(), " reservationId ", reservationId.toString()));

    User authenticatedUser = (User) ((Authentication) principal).getPrincipal();
    if(authenticatedUser.getAdministratedRestaurant() == null) {
        LOGGER.error(LogUtils.getErrorMessage(request, Thread.currentThread().getStackTrace()[1].getMethodName(), "The user " + authenticatedUser.getUsername() + " has no restaurant. A restaurant has to be added before offers can be selected."));
        return null;
    }

    Reservation reservation = reservationRepository.findOne(Integer.parseInt(reservationId));
    if(reservation == null){
        return null;
    }
    List<ReservationOffers> reservationOffers = reservation.getReservation_offers();
    if(reservationOffers == null){
        return null;
    }
    model.addAttribute("offers", reservationOffers);

    return "reservations :: reservationTable";

}

这是调用“reservation.html”中的 JavaScript 的按钮

<button type="button" class="btn btn-success" th:onclick="'javascript:openReservationModal(\''+*{reservations[__${stat.index}__].id}+'\');'">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </button>

这是我要显示的模式:

    <div id="reservationModal" class="modal fade" role="dialog" th:fragment="reservationTable">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" th:text="'Reservation Details'">Modal Header</h4>
            </div>
            <div class="modal-body">
                <table class="table table-hover" id="reservationTable">
                    <thead>
                        <tr>
                            <td th:text="'Name'"></td>
                            <td th:text="'Amount'"></td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="offer : ${offers}">
                            <td th:text="${offer.getOffer().getTitle()}"></td>
                            <td th:text="${offer.getAmount()}"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

我的reservation.html中有一个空的div

<div id="modalHolder">

</div>

还有使用 Ajax 的 JavaScript:

<script th:inline="javascript" type="text/javascript">

function openReservationModal(id) {


    $.ajax({
        url: "/reservations/details/"+id,
        success: function(data) {
            console.log(data);
            $("#modalHolder").html(data);
            $("#reservationModal").modal("show");
            }
        });

    }
</script>

谢谢大家!

编辑:这是包含按钮的表:

<form action="#" th:object="${wrapper}" method="post">
    <div style="height: 190px; overflow: auto;">
        <table class="table table-hover" id="reservationTable">
            <thead>
                <tr>
                    <th th:text="#{reservations.label.oderId}">Id</th>
                    <th th:text="#{reservations.label.customername}">name</th>
                    <th th:text="#{reservations.label.datetime}">date with time</th>
                    <th th:text="#{reservations.label.price}">price</th>
                    <th th:text="#{reservations.label.donation}">customer donation</th>
                    <th th:text="#{reservations.label.priceWithDonation}">price included with Donation</th>
                    <!-- <th th:text="#{reservations.label.confirmed}">finished reservation</th> -->
                    <!-- <th th:text="#{reservations.label.isfree}">free reservation</th> -->
                    <th th:text="#{reservations.label.choice}">reservation selection</th>
                    <th th:text="#{reservations.label.details}">reservation details</th>
                </tr>
            </thead>

            <tbody>
                <tr th:each="reservation, stat: *{reservations}">               
                    <div th:switch="${reservation.isUsedPoints()}">
                        <div th:case="false">
                            <td th:text="${reservation.getReservationNumber()}"></td>
                            <td th:text="${reservation.getUser().getUsername()}"></td>
                            <td th:text="${#dates.format(reservation.reservationTime, 'HH:mm')}"></td> 
                            <td><span th:text="${#numbers.formatDecimal(reservation.getTotalPrice(), 1, 'POINT', 2, 'COMMA')}"> </span> &euro;</td>
                            <td><span th:text="${#numbers.formatDecimal(reservation.getDonation(), 1, 'POINT', 2, 'COMMA')}"> </span> &euro;</td>
                            <td><span th:text="${#numbers.formatDecimal(reservation.getDonation() + reservation.getTotalPrice(), 1, 'POINT', 2, 'COMMA')}"> </span> &euro;</td>
                            <!-- <td th:text="${reservation.isConfirmed()}"></td> -->
                            <!-- <td th:text="${reservation.isUsedPoints()}" ></td> -->
                            <td>
                                <input type="hidden" th:field="*{reservations[__${stat.index}__].id}" />
                                <input type="checkbox" th:field="*{reservations[__${stat.index}__].confirmed}"/>
                                <input type="hidden" th:field="*{reservations[__${stat.index}__].rejected}" />
                                <input type="hidden" th:field="*{reservations[__${stat.index}__].donation}"/>
                                <input type="hidden" th:field="*{reservations[__${stat.index}__].totalPrice}"/>
                                <input type="hidden" th:field="*{reservations[__${stat.index}__].usedPoints}"/>
                            </td>           
                        </div>
                         <div th:case="true">
                        <input type="hidden" th:field="*{reservations[__${stat.index}__].id}" /> 
                        <input type="hidden" th:field="*{reservations[__${stat.index}__].confirmed}" />
                        <input type="hidden" th:field="*{reservations[__${stat.index}__].rejected}" />  
                        <input type="hidden" th:field="*{reservations[__${stat.index}__].donation}"/>
                        <input type="hidden" th:field="*{reservations[__${stat.index}__].totalPrice}"/>
                        <input type="hidden" th:field="*{reservations[__${stat.index}__].usedPoints}"/>
                    </div>
                    <td>
                    <button type="button" class="btn btn-success" th:onclick="'javascript:openReservationModal(\''+*{reservations[__${stat.index}__].id}+'\');'">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </button>
                    </td>
                    </div>
                </tr>
            </tbody>
        </table>
        </div>
        <button type="submit" class="btn btn-success" th:text="#{reservations.button.confirm}" name="confrim" style="float: right; margin-right: 25px;"></button>
        <button type="reject" class="btn btn-success" th:text="#{reservations.button.reject}" name="reject" style="float: right; margin-right: 25px;"></button>
        <input type="hidden"
            th:name="${_csrf.parameterName}"
            th:value="${_csrf.token}" />
    </form>

Answer 1

好吧，我自己发现了两个错误。首先，包含按钮的表与模式具有相同的 id。第二个是 Controller 中的@ResponseBody 注解。现在它将正确的数据返回到控制台，但仍然没有返回到模式。

这是控制台上的输出:

Data: <div id="reservationModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Reservation Details</h4>
            </div>
            <div class="modal-body">
                <table class="table table-hover" id="reservationOfferTable">
                    <thead>
                        <tr>
                            <td>Name</td>
                            <td>Amount</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Schwarzer Kaffe</td>
                            <td>1</td>
                        </tr>
                        <tr>
                            <td>Haxn</td>
                            <td>2</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>