最近在工作的时候遇到了thymeleaf模板引擎用直接提交数据返回成功与失败的提示时找了好多文档都没有找到合适的,都是一些用alert来提示的,然后实在没办法只能借鉴着网上的一些文章自己写.把经验分享给大家
好了,废话不多说,下面上代码
用到了SweetAlert 2
SweetAlert 2官网地址:https://www.sweetalert2.cn/#usage在这里插入代码片
后端代码
@RequestMapping("/selectHeathCheckup")
public String selectHealthCheckup(Model model,String patientId){
if(patientId.equals("null")){
model.addAttribute("msg1","patientId不能为空patientId=");
model.addAttribute("msgCode1","500");
return "addHealthCheckup";
}
List<PhysicalExamination> healthCheckupList= healthCheckupService.
selectHealthCheckupByPatientId(patientId);
if(healthCheckupList.size()<=0){
model.addAttribute("msg1","没有查到信息,请填写!");
model.addAttribute("msgCode1","200");
}
model.addAttribute("healthCheckupList",healthCheckupList);
model.addAttribute("msg1","信息查询成功");
model.addAttribute("msgCode1","200");
return "addHealthCheckup";
}
前端代码
<div class="collapse show" id="collapseExample2">
<table class="table table-striped">
<thead>
<tr>
<td style="width: 5%" align='center'>身高</td>
<td style="width: 5%" align='center'>体温</td>
<td style="width: 5%" align='center'>呼吸</td>
<td style="width: 5%" align='center'>脉搏</td>
<td style="width: 10%" align='center'>现体重</td>
<td style="width: 10%" align='center'>孕前体重</td>
<td style="width: 10%" align='center'>收缩压</td>
<td style="width: 10%" align='center'>舒张压</td>
<td style="width: 15%" align='center'>创建时间</td>
<td style="width: 25%" colspan="2" align='center'>操作</td>
</tr>
</thead>
<tbody id="tbodyId">
<input type="hidden" id="msg1" th:value="${msg1}" >
<input type="hidden" id="msgCode1" th:value="${msgCode1}" >
<tr th:each="healthCheckup : ${healthCheckupList}">
<td align='center' th:text="${healthCheckup.height}">身高</td>
<td align='center' th:text="${healthCheckup.temperature}">体温</td>
<td align='center' th:text="${healthCheckup.breathe}">呼吸</td>
<td align='center' th:text="${healthCheckup.pulse}">脉搏</td>
<td align='center' th:text="${healthCheckup.weightNow}">现体重</td>
<td align='center' th:text="${healthCheckup.beforeWeight}">孕前体重</td>
<td align='center' th:text="${healthCheckup.systolicPressure}">收缩压</td>
<td align='center' th:text="${healthCheckup.diastolicPressure}">舒张压</td>
<td align='center' th:text="${#dates.format(healthCheckup.createTime,'yyyy-MM-dd HH:mm:ss')}">创建时间</td>
<td align='center' ><button th:id="${healthCheckup.id}" type="button" class="btn btn-secondary" data-dismiss="modal">查看</button></td>
<td align='center' ><button th:id="${healthCheckup.id}" type="button" class="btn btn-secondary" data-dismiss="modal">修改</button></td>
</tr>
</tbody>
</table>
</div>
js代码
$(function(){
hint1();//页面加载时加载
})
function hint1(){
var message1=$("#msg1").val();//获取id为msg1隐藏域的value值
var messageCode1=$("#msgCode1").val();//获取Id为msgCode1隐藏域的value值
if (message1!=""||message1!=null){
msg(message1,messageCode1);
}
}
function msg(mge,messageCode){
if (messageCode == "200") {
Swal.fire({
icon: "info",
title: "提示",
text: mge,
showConfirmButton: false,
timerProgressBar: true,
timer: 1500
});
} else {
Swal.fire({
icon: "info",
title: "提示",
text: mge,
showConfirmButton: false,
timerProgressBar: true,
timer: 20000
});
}
}