前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Themeleaf通过ajax局部更新

Themeleaf通过ajax局部更新

原创
作者头像
Zero_xxl
修改2020-08-06 17:56:30
1.2K0
修改2020-08-06 17:56:30
举报
文章被收录于专栏:web工作学习web工作学习

需求:通过改变id,从数据库中回显不同的信息

前端:

代码语言:javascript
复制
<div class="row">
   <div class="col-sm-6">
     <div class="form-group">
        <label class="col-sm-4 control-label">单号:</label>
           <div class="col-sm-8">
           //onchange:修改option改变触发函数
           <select id="testFormId" class="form-control" name="testFormId" onchange="updateList(this)"
                   th:with="type=${subTest}">
           <option value="">-请选择-</option>
           <option th:each="dict : ${type}" th:text="${dict.id}"
                  th:value="${dict.id}" ></option>
           </select>
          </div>
    </div>
   </div>
</div>
<div th:fragment="subTestList" th:id="subTestList"> //th:fragment(局部更新的代码块)
        <div class="row" >
            <div class="col-sm-6">
                <div class="form-group" >
                    <label class="col-sm-4 control-label">应用标题:</label>
                    <div class="col-sm-8" >
                        <input name="title" class="form-control" type="text" th:value="${app != null && app.name != null} ? ${app.name} +'-上线申请单' : ''"  >
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group" >
                    <label class="col-sm-4 control-label">发布版本:</label>
                    <div class="col-sm-8">
                        //subTextList:更新的后台返回的数据
                        <input name="version" class="form-control" type="text" th:value="${subTestList != null && subTestList.version != null} ? ${subTestList.version} : ''">
                    </div>
                </div>
            </div>
        </div>
</div>

function updateList(obj) {
            var value = obj.options[obj.selectedIndex].value;
            $.ajax({ //ajax代码
                type: 'post',
                async: true,
                data:{id:value},
                url: ctx + "business/subOnline/add/updateByTestFormId",
                success: function (data) { //data:返回的数据
                    $('#subTestList').html(data);
                }
            })
        }

后端:

代码语言:javascript
复制
@PostMapping("/add/updateByTestFormId")
public String updateList(Long id, Model model){
    PortalAppSubTest subTest = portalAppSubTestService.selectPortalAppSubTestById(id);
    if(Objects.nonNull(subTest)){
        PortalApp app = appService.selectPortalAppByCode(subTest.getAppCode());
        if(Objects.nonNull(app)){
            model.addAttribute("app", app);
        }
        model.addAttribute("subTestList", subTest);//返回subTestList数据
    }
    return "business/subOnline/add::subTestList";//页面::th:fragment
}

效果:

修改测试单号,返回各自标题和版本
修改测试单号,返回各自标题和版本

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 需求:通过改变id,从数据库中回显不同的信息
    • 前端:
      • 后端:
        • 效果:
        相关产品与服务
        数据库
        云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档