Spring Boot thymeleaf Ajax，响应有效，但不显示答案

【问题标题】：Spring Boot thymeleaf Ajax, response works, but doesn't displaySpring Boot thymeleaf Ajax，响应有效，但不显示
【发布时间】：2020-10-14 18:55:06
【问题描述】：

一直在尝试理解并在网络上搜索答案，但我似乎无法在页面中显示响应

这是我的片段，它与 Thymeleaf 一起在列表中循环：

<div id="cnaver" class="col card-deck m1-5 my-3" th:if="${!products.isEmpty()}">
    <div class="carousel-testimony owl-carousel ftco-owl">
        <div class="card border-0" th:each="product : ${products}">
            <div class="item">
                <img class="imgx" th:if="${!product.getImage().isEmpty()}" th:src="${product.getImage()}"/>
                <div class="card-body">
                    <h4 class="card-little" th:text="${product.getName()}"></h4>
                </div>
                <div class="card-footer">
                    <p>
                        <span id="productPriceRtl" th:utext="${product.getPrice()}"></span> עוגיות
                    
                    </p>
                    <a class="btn btn-lg btn-outline-info btn-block spawner" th:href="${product.getName()}">קנה</a>
                    <!-- th:href="${'/spawn/' + product.getName()}" -->
                </div>
            </div>
        </div>
    </div>
</div>

根据 ajax 给出的 id 过滤产品列表的控制器

@GetMapping(value = {"/cnav/{ids}"})
public @ResponseBody ModelAndView sendToCNav(@PathVariable("ids") int ids) {
    ModelAndView modelAndView = new ModelAndView("fragments/product::cnavProduct");
    modelAndView.addObject("products", this.productService.getProductListByType(products, ids));
    return modelAndView;
}

最后是 Ajax

$(document).on("click", '.cajax', function() {
    
    $.ajax({
        type: "get",
        url: "/cnav/" + this.id,
        dataType: "html",
        success: function(response) {
            $(response).load(response);
            $("#cnaver").html(response);
        },
        
        error: function(response) {
            alert(response);
        }
    });
});

这是选择发送到 ajax 调用的 url 的导航栏

        <nav class="cnav" >
    <ul>
      <li class="cselected cajax" id="0">
        <div class="fonta"><i class="fas fa-skull-crossbones fa-3x"></i></div>
      </li>
      <li class="cnotselected cajax" id="1">
        <div class="fonta"><i class="fas fa-gift fa-3x"></i></div>
      </li>
      <li class="cnotselected cajax" id="2">
        <div class="fonta"><i class="fas fa-cat fa-3x"></i></div>
      </li>
      <li class="cnotselected cajax" id="3">
        <div class="fonta"><i class="fas fa-globe-americas fa-3x"></i></div>
      </li>
    </ul>
  </nav>

现在.. 问题是 html 中的响应是 100%，我将整个片段作为响应，但该页面似乎根本没有显示任何内容。例如，如果我将响应更改为 .text(response) ，我可以在正确的位置将整个片段视为文本，但 .html(response) 似乎不起作用，与 replaceWith 和追加..

【问题讨论】：

标签： ajax spring-boot thymeleaf

【解决方案1】：

在又一整天寻找答案后，问题似乎与 owl-carousel 有关。如果有人遇到类似问题，我在 ajax 中使整个片段动态化，我想只制作轮播动态就足够了。

还发现这个解释很有帮助：https://thecodebeast.com/post/how-to-add-dynamic-slides-to-owl-carousel-via-ajax/52

祝你有美好的一天:)

【讨论】：