你好，我现在做一个网页，点击图片，就可以跳出该图片的一些信息。图片是cangpin类，如果点击第一张图片，就会跳转到另一个html网页，显示第一张图片的信息，如果点击第二张图片，就会跳转到另一个html网页，显示第二张图片的信息。
我使用的是Springboot+Mybatis+Redis+Thymeleaf。前端就是Html+JavaScript+CSS。问题是Springboot和Thymeleaf能不能实现这样的功能。
我尝试使用过th:fragment 和th:include，但是行不通，thymeleaf显示错误。
看来这个办法不行了，我就删除删掉了。还有别的方法吗，用Thymeleaf+Springboot，可以使用JavaScript包括ajax也可以。能不能实现这个功能。
给出代码
这是原网页的代码，也就是跳转前的网页，名叫querycp2.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:border="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
……
</head>
<body style="background-color: black">
<div class="main" id="main" style="background-color: black">
<div class="jd-banner" id="banner">
<ul class="clearfix">
<li><a href="#"><img src="/image/li4.jpg" alt=""></a></li>
<li><a href="#"><img src="/image/li1.jpg" alt=""></a></li>
<li><a href="#"><img src="/image/li2.jpg" alt=""></a></li>
<li><a href="#"><img src="/image/li3.jpg" alt=""></a></li>
<li><a href="#"><img src="/image/li4.jpg" alt=""></a></li>
<li><a href="#"><img src="/image/li1.jpg" alt=""></a></li>
</ul>
<div class="previousBtn">
<span class="jd-sprites"></span>
</div>
<div class="nextBtn">
<span class="jd-sprites"></span>
</div>
<ol>
<li class="current"></li>
<li > </li>
<li ></li>
<li ></li>
</ol>
</div>
……
<div id="cn">
<li class="cn1"><a>数字藏品</a></li>
<li class="cn1"><a>发售计划</a></li>
<li class="cn1"><a>积分空投</a></li>
</div>
<a href="./li1.html" style="text-decoration: none">
<div id="co" style="overflow:hidden;background-color: black">
<div id="cp" th:each="cangpin,cangpinStat:${cangpinlist}">
<div id="cq" width="80%" height="auto">
<img th:src="${cangpin.path2}">
<p class="cqb" style="display:none" th:text="${cangpin.began}"></p>
<p class="cqd" style="display:none" th:text="${cangpin.num}"></p>
<p class="cqc"></p>
</div>
<div id="cqa">
<nobr class="span1" th:text="${cangpin.cangpinname}"></nobr><br>
<nobr class="span2" th:text="${cangpin.type2}"></nobr>
<nobr class="span3">限量</nobr>
<nobr class="span4" th:text="${cangpin.totalnum}"></nobr>
<nobr class="span5" th:text="' '+${cangpin.sys}"></nobr><br>
<img th:src="${cangpin.icon}" style="height: 28px;width: 28px;margin-left:25px">
<nobr class="span6" th:text="' '+${cangpin.company}"></nobr>
<nobr class="span7" th:text="' ￥'+${cangpin.xianjia}"></nobr>
</div>
</div>
</div>
</div>
</a>
<div id="cr" style="height:100px;background-color:black;text-align: center;color: white;font-size: 16px;font-weight: bold;
font-family: 华文琥珀;margin-top: 10px;margin-bottom: 30px">-更多内容敬请期待-</div>
</div>
<div id="menu" class="menu">
<div id="one" class="subMenu text-center" style="position: fixed;left: 8%">
<img class="menu_img" src="./image/home1.png" width="18px" height="18px">
<div class="menu_name">首页</div>
</div>
<div id="two" class="subMenu text-center" style="position: fixed;left: 41%">
<img class="menu_img" src="./image/cube1.png" width="18px" height="18px">
<div class="menu_name">藏品</div>
</div>
<div id="three" class="subMenu text-center" style="position: fixed;left: 74%">
<img class="menu_img" src="./image/person1.png" width="18px" height="18px">
<div class="menu_name">我的</div>
</div>
</div>
……
</body>
</html>
本来这里有th:fragment代码的，因为报错，我把它删掉了。
这是原网页对应的SprintgBoot的后端
@RequestMapping("/querycp2")
@ResponseBody
public Model getCangpin2(Model mp){
ArrayList<Cangpin> cp= reds.getResult();
for(int i=0;i<cp.size();i++) {
cp.get(i).setYuanjia(new DecimalFormat("#0.00").format(BigDecimal.valueOf(Double.valueOf(cp.get(i).getYuanjia()))));
cp.get(i).setXianjia(new DecimalFormat("#0.00").format(BigDecimal.valueOf(Double.valueOf(cp.get(i).getXianjia()))));
}
mp.addAttribute("cangpinlist", cp);
return mp;
}
这是目标网页的代码，也就是跳转后的网页，名叫li1.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
本来这里有th:include代码的，因为报错，我把它删掉了。
这是目标网页对应的SprintgBoot的后端
@RequestMapping("/li1.html")
@ResponseBody
public Model getCangpinDetail(Model mp){
mapper mapper2= getCangpinArr.getCangpinMap();
ArrayList<Details> det=new ArrayList<Details>();
det=mapper2.CangpinDetail();
return mp;
}
因为字数限制，省略了一些无关代码。
特别声明，我的两个后端都用的是@Controller注解，没用@RestController注解。
看看应该怎么样才能实现两个网页之间带值的跳转。
