求助前端大神，怎么把后端接口的数据的拼接到html的table里

Question

<div id="book_div_1">
    <div class="easyui-panel" title="本会议室预约情况">

        <table id="RoomBookTable" border="1px" >
            <thead>
            <tr>
                <th>日期</th>
                <th>周一<br /><%=date%></th><th>周二<br />2021-05-14</th><th>周三<br />2021-05-15</th><th>周四<br />2021-05-16</th><th>周五<br />2021-05-17</th><th>周六<br />2021-05-18</th><th>周日<br />2021-05-19</th></tr>
            </thead>
            <tbody>
<!--            <td bgcolor='Yellow' class='table_td' >那娜|CRAA工厂dasda审核</td>-->
            <tr class='table_tr'><td class='time_td'>08:30-09:00</td>
            <tr class='table_tr'><td class='time_td'>09:00-09:30</td>
            <tr class='table_tr'><td class='time_td'>09:30-10:00</td>
            <tr class='table_tr'><td class='time_td'>10:00-10:30</td>
            <tr class='table_tr'><td class='time_td'>10:30-11:00</td>
            <tr class='table_tr'><td class='time_td'>11:00-11:30</td>
            <tr class='table_tr'><td class='time_td'>11:30-12:00</td>
            <tr class='table_tr'><td class='time_td'>12:00-12:30</td>
            <tr class='table_tr'><td class='time_td'>12:30-13:00</td>
            <tr class='table_tr'><td class='time_td'>13:00-13:30</td>
            <tr class='table_tr'><td class='time_td'>13:30-14:00</td>
            <tr class='table_tr'><td class='time_td'>14:00-14:30</td>
            <tr class='table_tr'><td class='time_td'>14:30-15:00</td>
            <tr class='table_tr'><td class='time_td'>15:00-15:30</td>
            <tr class='table_tr'><td class='time_td'>15:30-16:00</td>
            <tr class='table_tr'><td class='time_td'>16:00-16:30</td>
            <tr class='table_tr'><td class='time_td'>16:30-17:00</td>
            <tr class='table_tr'><td class='time_td'>17:00-17:30</td>
            </tbody>
        </table>
    </div>
</div>
<br>
<div id="book_div_2">
    <div class="easyui-panel" id="book_div_21" title="会议室预定申请">
        <form method="POST" name="bookForm" id="bookForm" action="SubmitBook.php">
            <table>
<!--                <tr>-->
<!--                    <td><label>预约会议室</label></td>-->
<!--                    <td>-->
<!--                        <input class="easyui-textbox" name = "applyRoom" id = "applyRoom"  readonly style="width:200px;height:28px;" /></br>-->
<!--                    </td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                    <td><label>预约人帐号</label></td>-->
<!--                    <td><input class="easyui-textbox" name = "admin"  id = "admin" required='required' style="width:200px;height:28px;" /></td>-->
<!--                </tr>-->
                <tr>
                    <td><label>预约人姓名</label></td>
                    <td><input class="easyui-textbox" name = "userName"  id = "userName" required='required' style="width:200px;height:28px;" /></td>
                </tr>
                <tr>
                    <td><label>预约时间（开始）</label></td>
                    <td>
                        <input  type="datetime-local" name="StartTime" id="StartTime" required='required' style="width:200px;height:28px;"  />
                    </td>
                </tr>

                <tr>
                    <td><label>预约时间（结束）</label></td>
                    <td>
                        <input  type="datetime-local" name="EndTime" id="EndTime" required='required' style="width:200px;height:28px;"  />
                    </td>
                </tr>
                <td><label>预约原因</label></td>
                <td><input class="easyui-textbox" name = "applyReason"  id = "applyReason"  required='required' style="width:200px;height:28px;" /></td>
                </tr>
            </table>
            </br>
            <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="submitForm()" style="width:290px;height:30px;"  >提交申请</a>
        </form>
    </div>
</div>


                        <p id="ymd"></p>
<script src="webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<script type="text/javascript">

    var date = new Date()<!--获得日期数据-->
    var y = date.getFullYear();<!--年-->
    var m = date.getMonth()+1;<!--月，这里的月份必须要+1才是当前月份-->
    var d = date.getDate(); <!--日，getDay是获得当前星期几（0-6），getDate是获得当前日期-->
    var today = y+"-"+m+"-"+d;
    document.getElementById("ymd").innerHTML = "更新时间："+today;

    var applyId;
    function start(){
        var cs = window.location.search.substring(1);
        var id = cs.substring(cs.indexOf("=")+1);
        applyId = id;

        //刚进入页面显示今天以后的预约详情
        meetingInfo(today);

    }


    //进入会议室预约详情页面
    function meetingInfo(date){
        var adata = {
            "id" : applyId,
            "date" : date
        };
        $.ajax({
            type : "POST",
            dataType: "json",//通过GET方式上传请求
            contentType : "application/json",//上传内容格式为json结构
            data : JSON.stringify(adata),                                 //上传的参数
            async: false ,
            url : "booking",     //请求的url。与后端@Request Mapping注解中的值一致。
            success : function(data) {          //请求成功的回调函数

                showMeetingRoomBookingInfo(data);
            },
            error : function(e) {           //请求失败的回调函数
                console.log(e);
            }
        });
    }

    //显示预约的会议室的预约信息
    function showMeetingRoomBookingInfo(data){

        var str = "";//定义用于拼接的字符串
        for (var i = 0; i < data.length; i++) {
            //拼接表格的行和列
            str = "<tr><td>" + data[i].bookUserName + "|" + data[i].bookingReason + "</td></tr>";
            
            //追加到table中
            $("#RoomBookTable").append(str);         }

    }


    function checkTime(){

        var searchTime = new Date($('#SearchTime').val())
        var month = searchTime.getMonth()+1;
        var date = searchTime.getFullYear() +"-"+ month +"-"+ searchTime.getDate();
        meetingInfo(date);
    }

    function submitForm(){
        var startDate = new Date($('#StartTime').val())
        var endDate = new Date($('#EndTime').val())
        var startMonth = startDate.getMonth()+1
        var endMonth = endDate.getMonth()+1
        var startHours = startDate.getHours()-8
        var startMin = startDate.getMinutes()
        var endHours = endDate.getHours()-8
        var endMin = endDate.getMinutes()
        var bookingStartTime = startDate.getFullYear() +"-"+ startMonth +"-"+ startDate.getDate()  +" "+ startHours  +":"+ startMin
        var bookingEndTime = endDate.getFullYear() +"-"+ endMonth +"-"+ endDate.getDate()  +" "+ endHours  +":"+ endMin
        var adata = {
            "meetingId" : applyId,
            "bookUserName" : $('#userName').val(),
            "bookingStartTime" : bookingStartTime ,
            "bookingEndTime" : bookingEndTime,
            "bookingReason" : $('#applyReason').val()
        }
        $.ajax({
            type : "POST",
            dataType: "json",//通过GET方式上传请求
            contentType : "application/json",//上传内容格式为json结构
            data : JSON.stringify(adata),                                 //上传的参数
            async: false ,
            url : "submitForm",     //请求的url。与后端@Request Mapping注解中的值一致。
            success : function(data) {          //请求成功的回调函数
                if (data.status == 200) {
                    alert("预约成功！");
                    window.location.reload();
                }else if (data.status == 9999) {
                    alert(data.message);
                }
            },
            error : function(e) {           //请求失败的回调函数
                console.log(e);
            }
        });
    }

这是我写的html，我是专门做java的，但是新公司要我写个会议室预约系统，我看前端没多少东西，我就没前后端分离了，全都是我自己写的。但是写到这里不会了，网上查也查不到。现在写死了时间段，怎么把后端查询出的会议室预约的信息拼接到table里展示？？？真心求大神帮帮忙，微信可以发红包感谢！

 

现在我的页面展示是这样的：怎么能让日期动态展示？还有怎么把后台数据展示到表格里？

Answer 1

我可以给你写demo，私信