Themeleaf通过ajax局部更新

需求：通过改变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
}

效果：

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

数据库 后端 前端

0 人点赞