Springboot2 beetl ajax局部渲染

最新推荐文章于 2021-08-05 21:06:33 发布

明明那个春

最新推荐文章于 2021-08-05 21:06:33 发布

阅读量313

点赞数

CC 4.0 BY-SA版权

分类专栏：技术类文章标签：局部渲染 beetl ajax

本文链接：https://blog.youkuaiyun.com/qq_28355027/article/details/96148282

技术类专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Springboot2项目中使用Beetl模板引擎配合Ajax进行页面局部更新。通过示例代码展示了具体的实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Springboot2 beetl ajax局部渲染

在项目中抽取

simbill_view.html

                <div id="simbillviewList" style="margin-top: 40px;min-height: 500px">
                            @ #ajax userTable: {
                            @for(billlist in listMap){
                            <table id="simbillView" class="table table-bordered">
                                @if(billlistLP.first){
                                <thead>
                                <tr>
                                    <th style="text-align: center">ユーザーID</th><!-- 用户id-->
                                    <th style="text-align: center">プロジェクト名</th><!--项目名-->
                                    <th style="text-align: center">台数</th>
                                    <th style="text-align: center">使用バイト数</th>
                                    <th style="text-align: center">基本料金</th>
                                    <th style="text-align: center">中断料金</th>
                                    <th style="text-align: center">通信料金</th>
                                    <th style="text-align: center">請求金額</th>
                                </tr>
                                </thead>
                                @}
                                <tbody>
    
                                @for(bill in billlist.value){
                                <tr>
                                    @if(billLP.first){
                                    <td width="200" align="center" rowspan=${billlist.value.~size+1}>${billlist.key}</td>
                                    @}
                                    <td width="200" align="center">${bill.projectname}</td>
                                    <td width="200" align="center">${bill.devicenum}</td>
                                    <td width="200" align="center">${bill.connectbyte}</td>
                                    <td width="200" align="center">${bill.fee}</td>
                                    <td width="200" align="center">${bill.cancelfee}</td>
                                    <td width="200" align="center">${bill.connectfee}</td>
                                    <td width="200" align="center">${bill.cancelfee + bill.fee + bill.connectfee}
                                    </td>
                                </tr>
                                @}
    
                                <tr>
                                    <td style="font-weight: bold;text-align:center">合计金额</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td style="font-weight: bold;text-align:center">
                                        @var totalfee = 0;
                                        @for(bill in billlist.value){
                                        @totalfee = totalfee+bill.cancelfee + bill.fee + bill.connectfee;
                                        @}
                                        ${totalfee}
                                    </td>
                                </tr>
                                </tbody>
    
                            </table>
                            @}
                            @}
                        </div>

 @RequestMapping("/userTable")
     public String tags(HttpServletRequest request,Model model,
                        @RequestParam(required = false) String account,
                        @RequestParam(required = false) String beginTime,
                        @RequestParam(required = false) String endTime) {
         getSimbillViewList(model, beginTime, endTime, account);
         return PREFIX + "simbill_view.html#userTable";
     }

js代码:

$("#simbillviewList").load(Feng.ctxPath + "/simbillView/userTable",
        {
            "account": account,
            "beginTime": startTime,
            "endTime": endTime
        },
        function (data) {
            //console.log(data);
        });