关于Thymeleaf Ajax 异步加载，刷新异步数据

最新推荐文章于 2021-08-06 16:27:07 发布

qq_40794785

最新推荐文章于 2021-08-06 16:27:07 发布

阅读量2.8k

点赞数 1

文章标签： java 后端 jquery

本文链接：https://blog.csdn.net/qq_40794785/article/details/105431016

版权

关于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>

用这个数据直接替换到原来的数据就实现了异步加载

感谢大家的观看！！！

欢迎大家来交流学习！

qq_40794785

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
关于Thymeleaf Ajax 异步加载，刷新异步数据

关于Thymeleaf Ajax 异步加载，刷新异步数据最近做项目发现需要thymeleaf的异步刷新操作，以前做项目用过这个技术，时间长了有点忘记了，在翻到以前的去看一下顺便记录下来首先看一下MusicList.html页面内容<script type="text/javascript" src="js/index.js" th:src="@{/staticresource/js/...
复制链接

扫一扫