关于Thymeleaf Ajax 异步加载,刷新异步数据
最近做项目发现需要thymeleaf的异步刷新操作,以前做项目用过这个技术,时间长了有点忘记了,在翻到以前的去看一下顺便记录下来
首先看一下MusicList.html页面内容
<script type="text/javascript" src="js/index.js" th:src="@{/staticresource/js/index.js}"></script>
</head>
<body>
<div class="songiteml" id="items" th:fragment="songitems">
<li class="listmusic">
<input type="checkbox" name="" id="" value="" />
<h5 class="sname">歌曲</h5>
<h5 class="songer">歌手</h5>
<h5 class="songtime">时长</h5>
</li>
<!-- 主要数据来至这个"playlist"-->
<li class="listmusic playli" th:each="status:${playlist}">
<input type="checkbox" />
<i th:value="${aplist.id}">[[${status.index}]]</i>
<h5 class="songtit">[[${aplist.songname}]]</h5>
<h5 class="sogername">[[${aplist.songer}]]</h5>
<h5 class="sogertime">03:21</h5>
</li>
</div>
在 index.js中发送异步请求
function palyer(_this)
{
var xmlhttp = new XMLHttpRequest();
var seraddrs = 'http://localhost:8080/XXXXXX/play/flush/'+_this.getAttribute("value");
xmlhttp.open("GET", seraddrs);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.onreadystatechange=function (ev) {
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
var items=document.getElementById("items");
if(items==null)
window.open('http://localhost:8080/XXXXXX/play/'+_this.getAttribute("value"));
else
items.innerHTML=xmlhttp.response;
}
};
xmlhttp.send(null);
}
服务端的Controoller
@RequestMapping("/play/flush/{id}")
public String flushpage(@PathVariable("id") int id, Model model)
{
model.addAttribute("playlist",XXXXXvalue);
//返回到musicList.html 中的 th:fragment="songitems" 的Div中
return "musicList::songitems";
}
对返回数据的打印
xmlhttp.response:
<div class="songiteml" id="items">
<li class="listmusic">
<input type="checkbox" name="" id="" value="" />
<h5 class="sname">歌曲</h5>
<h5 class="songer">歌手</h5>
<h5 class="songtime">时长</h5>
</li>
<li class="listmusic playli">
<input type="checkbox" />
<i value="175581">0</i>
<h5 class="songtit">右手边</h5>
<h5 class="sogername">光良</h5>
<h5 class="sogertime">03:21</h5>
</li>
<li class="listmusic playli">
<input type="checkbox" />
<i value="176030">1</i>
<h5 class="songtit">爱上不该爱的人</h5>
<h5 class="sogername">宇桐非</h5>
<h5 class="sogertime">03:21</h5>
</li>
</div>
用这个数据直接替换到原来的数据就实现了异步加载
感谢大家的观看!!!
欢迎大家来交流学习!