首先要在JSP文件中引入Jquery,使用ajax进行接口请求操作
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
ajax 请求示例
<script>
$(document).ready(function(){
$.ajax({
url: window.location.protocol + "//" + window.location.host + "/api/GetRoleRoom",//要请求的服务器url
async:true,//是否是异步请求
cache:false,//是否缓存结果
type:"GET",//请求方式
dataType:"json",//服务器返回什么类型数据 text xml javascript json(javascript对象)
success:function(result){//函数会在服务器执行成功后执行,result就是服务器返回结果
//见下面的代码块
}
},
error:function(jqXHR, textStatus, errorThrown) {
}
});
});
</script>
我研究了很多办法,因为jsp本来就不是前后端分离项目,如果要servlet返回json数据并在jsp中进行渲染的话,我暂时还没有找到方法,所以用了innerHTML来进行数据渲染,数据渲染代码块如下。但是我感觉这种办法很麻烦,如果大家有更好的办法可以告诉我一下。
<script>
for(let i = 0 ; i < result.data.length ; i ++){
var html = "<div class=\"layui-row layui-col-space15\">"+
" <div class=\"layui-col-md15\">\n"+
" <div class=\"layui-card\">\n"+
" <div class=\"layui-card-header\">\n"+
" <div>" + result.data[i].floor + "号宿舍楼</div>\n"+
" <div style=\"color: #03A1CD;display: flex\"><div id=\"add\" class=\"add\">添加</div> / "+
"<div id=\"del\" class=\"del\">删除</div></div>\n"+
" </div>\n"+
" <div class=\"layui-card-body\" style=\"display: flex;flex-wrap: wrap\">\n"
for(let m = 0 ; m < result.data[i].list.length ; m++){
var status = result.data[i].list[m].status == 0 ? "repair" : result.data[i].list[m].num == result.data[i].list[m].allnum ? "Crowding" : result.data[i].list[m].num <= result.data[i].list[m].allnum / 2 ? "normal" : "free"
html +=
" <div class=\"layui-bg-gray\" id=\"room\">\n"+
" <div>房间人数 : "+ result.data[i].list[m].num +"/" + result.data[i].list[m].allnum + "</div>\n"+
" <div style=\"padding: 5px\">\n"+
" <img style=\"height: 70px;width: 70px\" src=\"/img/room/" + status + ".png\">\n"+
" </div>\n"+
" <div>\n"+
" " + result.data[i].list[m].room + " 宿舍\n"+
" </div>\n"+
" </div>\n"
}
html+=
" </div>\n"+
" </div>\n"+
" </div>\n"+
" </div>"
document.getElementById("box").innerHTML = document.getElementById("box").innerHTML + html
</script>
效果图如下