ajax - Spring Boot thymeleaf Ajax,响应有效,但不显示
问题描述
一直试图理解并在网络上搜索答案,但我似乎无法在页面中显示响应
这是我的片段,它与 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;
}
最后是阿贾克斯
$(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 中使整个片段动态化,我想只使轮播动态化足够了。
还发现这个解释很有帮助:https ://thecodebeast.com/post/how-to-add-dynamic-slides-to-owl-carousel-via-ajax/52
有一个美好的一天:)
推荐阅读
- java - 通过@Autowired 访问时的 NPE
- python-3.x - 使用 Psycopg 2 转义 postgres 相似性运算符 (%)
- reactjs - 如何将数组的元素放在复选框中?
- caching - amp-pixel 在 AMP 缓存中丢失
- r - 如何将阶乘变量转换为 r 中的存在-不存在数据?
- java - 为什么我在更改屏幕并在 Libgdx 中绘制 Sprite 后得到 NPE
- google-app-engine - 如何更改 Google App Engine 中的部署网页?
- html - 仅在使用纯 css 滚动过去某个点后,如何打开混合混合模式?
- gulp - 更改 gulp 的 dest 文件夹
- python - 当调用 tf.linalg.inv 时,TensorFlow 崩溃并无法创建 cuSolverDN 实例