问题：

使用Ajax从Spring Controller以模式加载数据

茹康裕

2023-03-14

我两个月前刚开始学习Spring，以前从未做过Ajax或JavaScript。所以我对这个很陌生。我想做的是从控制器中的GET方法加载数据，将其填充到模式中。我正在使用ajax来实现这一点。基本上我做了这家伙做的事https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/正在做。但它不起作用。

希望有人能帮我。

这是我的控制器：

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

我预订的房间里有一个空房间。html

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

共有1个答案

羊浩广

2023-03-14

好吧，我自己发现了两个错误。首先，连接按钮的Table与模态具有相同的id。第二个是控制器中的@响应体注释。现在它将正确的数据返回到控制台，但仍然没有返回到模态。

这是控制台上的输出：

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>

类似资料：

使用jQuery Ajax从数据库加载信息

问题内容：问题我尝试使用以下在此页面上：http : //grb.sonoma.edu : 81/paging.php从数据库加载数据。方法1仅在IE8中有效，但仅在刷新页面后才有效。首次加载页面时，我收到“完成此操作所需的数据尚不可用”。错误。我更喜欢方法1的原因是因为它使我可以访问表中的各个行。例如，每一行都有一个“突发”类。我在用单击时更改所选行的颜色。这似乎仅适用于方法1，而不适
可以计算使用AJAX加载了多少数据？

问题内容：我一直在忙于一些AJAX代码。我想计算已加载了多少数据，并想用百分比显示它。我所有的预加载信息都在“反馈”中。我可以计算它包含多少数据（以字节为单位），也可以查看进度吗？就像加载时一样：10kb，20kb，30kb等我的代码：对不起，我英语不好。问题答案：这是可能的。XHRs有一个事件。唯一的问题是访问XHR对象- 不幸的是仅接收该对象，而不接收基础XHR对象。也不能作为
从CSV加载数据模式的问题

对象文件：零件文件：用于加载数据的密码命令行： neo4j2.1.7和neo4j2.2.0-M04都存在此问题。
JBoss7-从模块类加载器以编程方式加载JAR

我在JBoss7中部署了一个WAR，它使用上下文类加载器动态加载jar资源。但是，上下文类加载器只在WEB-INF/lib文件夹中查找资源 Service Module Loader中模块“Deployment..war：main”的ModuleClassLoader 我如何在jboss中为我拥有资源的特定模块获取类加载器。我有需要加载到jboss_home/modules/org/custom
Select2 JS使用Ajax加载远程数据

问题内容：我正在使用Select2 JS版本4.0.0-rc.1，并且无法通过远程Ajax方法加载建议。以下是标记和代码 JavaScript jQuery 服务器返回的Json结果我完全不确定是否需要编写特定的函数来显示建议，有关Ajax部分的评论指出，我们不应更改结果Json数据。现在有人请告诉我，让代码正常工作以显示建议还需要做些什么。我想随着新版本的select2发生了很多变化。
使用Ajax将数据加载到Highcharts中

问题内容：我正在尝试通过JQUERY AJAX调用来更新页面加载和选择菜单更改时的高图表。有以[[10,1228800000]，[10,1228800000]]格式返回的数据。图表为空白，不对任何数据进行图形处理。尝试了此处发布的几种解决方案，但没有一个有效。有什么错误吗？提前致谢。编辑：最新的代码仍然无法正常工作：问题答案：您必须使用文档中描述的系列对象的setData方法。你的情况

使用Ajax从Spring Controller以模式加载数据

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档