在一个页面加载另一个渲染的页面

简介:

<div id="moreLikeThis" class="section_offset">
  <div class="tabs products " >
     <ul class="tabs_nav clearfix " >
        <li style="width: 235px;"><a href="#tab-5">You Might Also Like</a></li>
     </ul>

     <div class="tab_containers_wrap" >
        <div id="tab-5" class="tab_container" style="width:235px;">
           <div class="owl_carousel carousel_in_tabs type_2 likecontent">

           </div>
        </div>
     </div>

  </div>
</div>



<script type="text/javascript">
  jQuery().ready(function () {
     
     $("#moreLikeThis").load("/products/similarProduct.json",{maxResult:8,pageNo:0,productId:${GoodsDetailsForm.id}})



@RequestMapping(value = "similarProduct.json", method = RequestMethod.POST)
public String getSimilarProduct(HttpServletRequest request,
                               ModelMap model,
                               @RequestParam(value = "maxResult") int maxResult,
                               @RequestParam(value = "pageNo") int pageNo,
                               @RequestParam(value = "productId", defaultValue = "0") long productId,
                               HttpSession session) {
   Locale currentLocale = getRequestLanguage(session, request);
   ProductJsons productJsons = null;
   productJsons = extendProductService.moreLikeTag(productId, maxResult, currentLocale.toString());
   if (productJsons != null) {
       if (productJsons.getProductJsonList() != null) {
           ArrayList<Long> ids = new ArrayList<>();
           for (ProductJson productJson : productJsons.getProductJsonList()) {
               ids.add(productJson.getId());
           }
           model.addAttribute("ratingMap", getAverageRatingById(ids));
           model.addAttribute("checkWish", checkWishById(ids));
           model.addAttribute("productJsons", productJsons);
       }
   }
   return "moreLikeThis";
}


moreLikeThis.jsp



<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:if test="${not empty productJsons and not empty productJsons.productJsonList}">
<div class="tabs products" style="height: 450px;">
  <ul class="tabs_nav clearfix">
     <li style="width: 235px;"><a href="#tab-5">You Might Also Like</a></li>
  </ul>
  <div class="tab_containers_wrap">
     <div id="tab-5" class="tab_container">

        <div class="owl_carousel carousel_in_tabs type_2 likecontent">

           <c:forEach items="${productJsons.productJsonList}" var="product">
                 <c:choose>
                    <c:when test="${not empty product.promotionPrice.price}">
                       <c:set var="price" value="${currency.symbol}${product.promotionPrice.price}"></c:set>
                    </c:when>
                    <c:otherwise>
                       <c:set var="price" value="${currency.symbol}${product.displayPrice.price}"></c:set>
                    </c:otherwise>
                 </c:choose>
                 <div class="product_item">
                    <div class="image_wrap">
                       <img class="img_zoom" data-zoom-image="${imageHost}${product.displayImage.url}" src="${imageHost}${product.displayImage.smallUrl}" alt="">
                    </div>
                    <div class="description">
                       <a class="product_title"
                          href="/shop/product/${fn:replace(product.productDisplayName.name, " ", "-")}/${product.id}"
                          title="${product.productDisplayName.name}">${product.productDisplayName.name}</a>
                       <div class="clearfix product_info">
                          <p class="product_price alignleft"><b>${price}</b></p>
                          <c:set value="${ratingMap.get(product.id)}" var="rating"></c:set>
                          <c:choose>
                             <c:when test="${not empty rating}">
                                <div class="rating-box">
                                   <div class="rating" style="width: ${rating.rating*20}%;"></div>
                                </div>
                             </c:when>
                             <c:otherwise>
                                <div class="rating-box">
                                   <div class="rating" style="width: 100%;"></div>
                                </div>
                             </c:otherwise>
                          </c:choose>
                       </div>
                       <div class="clearfix action">
                          <a href="/shop/product/${fn:replace(product.productDisplayName.name, " ", "-")}/${product.id}"
                             class="button_red middle_btn">VIEW DETAILS</a>
                       </div>
                    </div>
                 </div>

              </c:forEach>


        </div>


     </div>
  </div>
</div>
</c:if>
<script type="text/javascript">
  jQuery().ready(function () {

     $('.carousel_in_tabs.type_2, .owl_carousel.four_items').owlCarousel({
        responsive: {
           0: {
              items: 1
           },
           490: {
              items: 2
           },
           684: {
              items: 3
           },
           992: {
              items: 4
           }
        },
        loop:true,
        nav: true,
        navText: [],
        rtl: window.ISRTL ? true : false
     });
  })
</script>
本文转自wiwi博客51CTO博客,原文链接http://blog.51cto.com/wiwili/1968589如需转载请自行联系原作者

wiwili
相关文章
|
29天前
|
人工智能 搜索推荐 数据库
从零搭建RAG系统:原理剖析+代码实践,解锁大模型“记忆力”新姿势
RAG(检索增强生成)为大模型配备“外接大脑”,通过连接专属知识库,提升回答准确性。广泛应用于医疗、法律、客服等领域,兼具专业性与可解释性。本文详解其原理、实战步骤与优化技巧,助你快速构建个性化AI助手。
528 11
|
6月前
|
存储 JSON 数据建模
数据建模怎么做?一文讲清数据建模全流程
本文深入解析了数据建模的全流程,聚焦如何将模糊的业务需求转化为可落地的数据模型,涵盖需求分析、模型设计、实施落地与迭代优化四大核心环节,帮助数据团队提升建模效率与模型实用性。
|
1月前
|
安全 Unix API
告别混乱时间处理:Python中time与datetime模块的实用选择
告别混乱时间处理:Python中time与datetime模块的实用选择
298 126
|
1月前
|
存储 JavaScript 前端开发
JavaScript基础
本节讲解JavaScript基础核心知识:涵盖值类型与引用类型区别、typeof检测类型及局限性、===与==差异及应用场景、内置函数与对象、原型链五规则、属性查找机制、instanceof原理,以及this指向和箭头函数中this的绑定时机。重点突出类型判断、原型继承与this机制,助力深入理解JS面向对象机制。(238字)
|
JavaScript 前端开发
ES6新特性: Proxy
ES6新特性: Proxy
|
JavaScript API
Vue | Vue.js 全家桶 Pinia状态管理
Vue | Vue.js 全家桶 Pinia状态管理
568 1
|
JavaScript 数据安全/隐私保护
JS逆向 -- 某新闻数据包中sign值加密分析
JS逆向 -- 某新闻数据包中sign值加密分析
252 0
|
弹性计算 分布式计算 DataWorks
自建Hadoop迁移MaxCompute
客户基于ECS、IDC自建或在友商云平台自建了大数据集群,为了降低企业大数据计算平台的成本,提高大数据应用开发效率,更有效保障数据安全,把大数据集群的数据、作业、调度任务以及业务数据库整体迁移到MaxCompute和其他云产品。
1184 54
|
前端开发 JavaScript Java
超大坑!springboot + vue + element-ui,运行前端项目报these dependencies were not found的问题
These dependencies were not found: * babel-runtime/core-js/json/stringify in ./src/mock/modules/sys-menu.
9959 0
|
21天前
|
人工智能 自然语言处理 Shell
🦞 如何在 OpenClaw (Clawdbot/Moltbot) 配置阿里云百炼 API
本教程指导用户在开源AI助手Clawdbot中集成阿里云百炼API,涵盖安装Clawdbot、获取百炼API Key、配置环境变量与模型参数、验证调用等完整流程,支持Qwen3-max thinking (Qwen3-Max-2026-01-23)/Qwen - Plus等主流模型,助力本地化智能自动化。
32709 125
🦞 如何在 OpenClaw (Clawdbot/Moltbot) 配置阿里云百炼 API

热门文章

最新文章