JSP调用接口 并渲染数据到页面

首先要在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">
"+
                                    "                <div class="layui-card">
"+
                                    "                    <div class="layui-card-header">
"+
                                    "                        <div>" + result.data[i].floor + "号宿舍楼</div>
"+
                                    "                        <div style="color: #03A1CD;display: flex"><div id="add" class="add">添加</div> / "+
                                    "<div id="del" class="del">删除</div></div>
"+
                                    "                    </div>
"+
                                    "                    <div class="layui-card-body" style="display: flex;flex-wrap: wrap">
"
                                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">
"+
                                    "                                <div>房间人数 : "+ result.data[i].list[m].num +"/" + result.data[i].list[m].allnum + "</div>
"+
                                    "                                <div style="padding: 5px">
"+
                                    "                                    <img style="height: 70px;width: 70px" src="/img/room/" + status + ".png">
"+
                                    "                                </div>
"+
                                    "                                <div>
"+
                                    "                                    " + result.data[i].list[m].room + " 宿舍
"+
                                    "                                </div>
"+
                                    "                            </div>
"
                                }
                                html+=
                                    "                    </div>
"+
                                    "                </div>
"+
                                    "            </div>
"+
                                    "        </div>"
                        document.getElementById("box").innerHTML = document.getElementById("box").innerHTML + html
</script>