Question

我正在尝试发布帖子并自动更新列表内容，而无需刷新页面。

使用当前代码，在数据库中正确创建了行。但是，要查看新项目，我必须刷新页面。

我的目标是如果可以插入，则显示模式，如果可以，显示错误消息，并使用新项自动更新列表。

但是，没有刷新的内容不会显示。而且，用于显示“ Insert OK”的模态也不会显示（与插入is ko时的错误消息相同）。

那么你能告诉我我做错了什么，并帮助我解决吗？

非常感谢！

HTML

<div th:if="${#response.status == 201}" class="modal fade modal-success" id="newreservation-success" tabindex="-1" role="dialog" aria-labelledby="modalNewreservationSuccess" aria-hidden="true" data-keyboard="false" data-backdrop="static">
     <div class="modal-dialog" role="document">
           <div class="modal-content">
                 <div class="modal-header">
                      <h5 class="modal-title" id="modalNewreservationSuccess">Ajout d'une réservation</h5>
                 </div>
                 <div class="modal-body">
                      Réservation créée avec succès.
                 </div>
                 <div class="modal-footer">
                       <button type="button" class="btn btn-primary modal-success-ok" data-dismiss="modal">Valider</button>
                  </div>
           </div>
      </div>
 </div>

 <div th:if="${#response.status == 404 || #response.status == 406 || #response.status == 400}" id="newreservation-danger" class="alert alert-danger alert-dismissible fade show hide-alert" role="alert">
       Une erreur est survenue.
       <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
  </div>

  ...

   <div class="col form-group">
        <label for="titreoeuvre-annulation">Titre de l'oeuvre*</label>
        <select id="titreoeuvre-annulation" class="form-control">
                <option th:each="oeuvre : ${oeuvres}"
                        th:value="${{oeuvre.getTitre()}}"
                        th:text="${oeuvre.getTitre()}">
                </option>
         </select>
  </div>

JS （ajax请求）

function newEmprunt() {
    let data = {
        "idexemplaire": $("#idExemplaireNewEmprunt").val(),
        "idusager": $("#idUsagerNewEmprunt").val()
    };
    sendAjaxRequest('/emprunts', data, "POST");
}

控制器

@PostMapping
public ModelAndView newEmprunt(HttpEntity<String> infoEmprunt) throws IOException {
    boolean valid = true;
    ModelAndView modelAndView = new ModelAndView();
    String body = infoEmprunt.getBody();
    if(body == null) {
        valid = false;
        modelAndView.setStatus(HttpStatus.BAD_REQUEST);
    }
    JsonNode node = Tools.createObjectMapper().readTree(body);
    String idexemplaire = node.get("idexemplaire").asText();
    String idusager = node.get("idusager").asText();

    Optional<Exemplaire> exemplaire = exemplaireResource.findById(idexemplaire);
    Optional<Usager> usager = usagerResource.findById(idusager);
    if(!exemplaire.isPresent() || !usager.isPresent() || !usager.get().getActif()) {
        valid = false;
        modelAndView.setStatus(HttpStatus.NOT_FOUND);
    }

    Emprunt checkExemplaireDispo = empruntResource.getEmpruntByExemplaireAndStatut(exemplaire.get(), StatutEmprunt.EN_COURS);
    if(checkExemplaireDispo != null) {
        valid = false;
        modelAndView.setStatus(HttpStatus.NOT_ACCEPTABLE);
    }

    if(valid) {
        Emprunt emprunt = new Emprunt(usager.get(), exemplaire.get());
        empruntResource.save(emprunt);

        exemplaire.get().setDisponible(false);
        exemplaireResource.save(exemplaire.get());

        // on passe la reservation correpondante à l'emprunt à "terminée"
        Reservation reservation = reservationResource.getReservationByUsagerAndOeuvreAndStatut(usager.get(), exemplaire.get().getOeuvre(), StatutReservation.EN_COURS);
        if (reservation != null) {
            reservation.setStatut(StatutReservation.EN_COURS);
            reservationResource.save(reservation);
        }
    }
    modelAndView.addObject("emprunts", empruntResource.getEmpruntsByStatutEquals(StatutEmprunt.EN_COURS));
    modelAndView.setViewName("webapp/pages/emprunts");
    modelAndView.setStatus(HttpStatus.CREATED);
    return modelAndView;
}

内容无法使用Thymeleaf和声明自动更新（如果无法运行）

0 个答案: