使用Spring控制器的Ajax从Modal中加载数据

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

希望有人能帮助我。

这里是我的控制器：

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

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

这里中调用JavaScript的按键我想显示模式：

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

还有就是JavaScript和Ajax的：

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

来源

2017-06-15 Niklas

我看不错。你在浏览器控制台检查了JS错误吗？ AJAX请求/响应是什么样的？ – khriskooper

另外，您可以分享下面一行的呈现HTML的示例吗？：

我刚刚在Firefox中用调试器检查过它，好像它根本没有进入成功功能。但我想知道，因为模式显示没有任何。 – Niklas

好，我发现了两个错误由myselfe。首先，连接按钮的表具有与模式相同的id。第二个是控制器中的@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>

来源

2017-06-15 10:01:11 Niklas

如果有人感兴趣，我通过将空格div“modalHolder”移动到包含按钮的表单中来解决问题。 – Niklas

使用Spring控制器的Ajax从Modal中加载数据

回答

相关问题