Thymeleaf在项⽬中的应⽤及前后端交互的⼀些知识（1）
经过⼀段时间的⼯作，我的第⼀个项⽬已经快要上线了。本篇⽂章介绍些thymeleaf在⼯作中的实际应⽤，但是更多的还是⼀些前端处理后台数据的⼀些思路，如果有什么不正确的地⽅，希望⼤家指点。
1.th:each
<dd th:each="grade: ${application.sysDictMap.learnPeriod}">//application.sysDictMap  是从数据字典取出的⽅式。
<label class="">
      <input type="checkbox" th:value="${grade.AA}" th:attr="val=${grade.BB}"> //这⾥⾯的AA 和 BB就是你需要的数据的名称⽐如说AA可以是name，BB可以是id。。。
    </label>
<span th:text="${grade.CC}" th:attr="val=${grade.DD}"></span>
</dd>
  1’ .上述的${application.sysDictMap.learnPeriod}是可以直接从model⾥⾯取出来的，但如果，从model⾥⾯取不出来，必须要⾛接⼝才能取得到，那样就需要⽤如下的⽅法（与Thymeleaf没什么联系，是⼀种前端⽅法）：
  a.以下是写在⼦页⾯上的js:
<div th:include="jsLead::jsLead">
<!-- jsLead 全局js引⼊ -->
</div>
<script th:inline="javascript">
  id = [[${session.XXXXX.id}]]; //这⾥是从页⾯model取出并作为公共变量。
//列表获取需要显⽰的信息
App2.id);//此处为调⽤名为screenSchoolList的⼀个⽅法，括号⾥⾯为传递的⼀个参数，但是这个参数同时也调⽤了名为orgtid的值。
</script>
  b.以下是写在app2.js⽂件⾥⾯的js代码：
  //当前切换区域下的校区列表
var erpApp2 = {
    orgtid : '',
    aa: '',//XX筛选条件收集param
bb: '',//XX筛选条件收集param
cc: '',//XX筛选条件收集param
dd: 20,//页数
ee:'',//学⽣
ff:'',//职位
gg:'',//校区
screenSchoolList: function (id){
$.ajax({
url: '/XX/XX/'+id,//接⼝地址
type: 'GET',//请求类型
dataType: "JSON",//数据类型
success: function(data){
$.each(data.data.XX,function (index, el){
var dd = '<dd>'+
'<label class=""><input type="checkbox" value="'+this.Name+'" val="'+this.id+'"></label>'+
'<span val="'+this.id+'">'+this.Name+'</span>'+
'</dd>';
$('.XX').after(dd);
});
}
});
}
}
attention：如果参数传的⽅式是如下的a，切记加上traditional，如果是⽅式b，要使⽤contentType.
  a.
  data: {'ids':ids},//参数
traditional: true,
  b.
  data: JSON.stringify(parameter),//参数
contentType : 'application/json;charset=utf-8',
2.th:if
  这条补充呢就是说th:if⾥⾯可以放各种各样的表达式~~~⾼⼤上啦，下⾯是两个例⼦：
<li class="XX" th:if="${User.Status == 0 || AA != 0 || BB != 0}">
<p class="XX" th:if="${!(User.userCode == null || User.userCode == '')}"></p>
  第⼆个 th:if 呢有⼀个需要注意的point。
  判断不能写成（User.userCode ！= null && User.userCode ！= ' '；）如果要写就要写成上述例⼦2的形式。
3.th:class
<span th:class="${User.Sex == 1 ? 'new-radio pull-left on':'new-radio pull-left'}" is-male="1"></span>
  如果 user.sex是 1 的话，执⾏问号后⾯的，也就是说class会变成 new-radiio pull-left on，否则就会变成 new-radiio pull-left 。这种⽅法在angular⾥⾯也同样适⽤。
4.th:selected
<select class="" name="account">
<option th:each="subject :${application.subjectList}" th:selected="${student.Subject} == ${achSubject} ? 'selected':'false'" th:text="${subject.name}" th:value="${subject.id}"></option> </select>
5.th:href
<a th:href="@{'/AA/BB/CCpage/'+${userTid}}">基本信息</a>
6.th表达式⼯具对象
#dates 与java.util.Date对象的⽅法对应，格式化、⽇期组件抽取等等
#calendars 类似#dates，与java.util.Calendar对象对应
#numbers 格式化数字对象的⼯具⽅法
#strings 与java.lang.String对应的⼯具⽅法：contains、startsWith、prepending/appending等等
#objects ⽤于对象的⼯具⽅法
#bools ⽤于布尔运算的⼯具⽅法
#arrays ⽤于数组的⼯具⽅法
#lists ⽤于列表的⼯具⽅法
#sets ⽤于set的⼯具⽅法
#maps ⽤于map的⼯具⽅法
#aggregates ⽤于创建数组或集合的聚合的⼯具⽅法
#messages ⽤于在变量表达式内部获取外化消息的⼯具⽅法，与#{…}语法获取的⽅式相同
#ids ⽤于处理可能重复出现（例如，作为遍历的结果）的id属性的⼯具⽅法
eg1：判断集合的长度#lists
<span>共<i class="XX" th:text="${#lists.size(people)}"></i>个⼈</span>
7*.前端从数据字典取出数据的⽅法。
  这次项⽬接触了数据字典，下⾯是从数据字典取出数据的⼀些⽅式。其实上⾯的第⼀个例⼦⾥⾯就有从数据字典取出数据放⼊HTML的例⼦，但是那是类似angular，以model形式直接将数据放⼊标签内。
1.<dd th:each="grade: ${application.sysDictMap.learnPeriod}"</dd>
2.<span class="" th:text="${application.achSubject].name}"></span>
  除上述两个例⼦之外，还可能存在这种情况，
  1.Java后台返回来的是‘1,2,3’字符串的形式，但是实际上⽐如1代表⼩学，2代表初中，3代表⾼中。这样就⽆法向上述那样直接放在HTML标签⾥去取，⽽是需要在js中做处理，然后⽤prepend或者before或者after等jQuery⽅法再拼接到HTML中：
var AAAA= [[${achLearnPeriod}]];//xueduan
//学段 Period
var arr= AAAA.split(',');
var teaPeriodHtml = '';
for(var i=0;i<arr.length;i++){//var num = parseInt(arr[i]);
var n= i+1;
nuM = parseInt(teaPeriodArr[i]);
teaPeriodHtml +='<span class="" val="'+nuM+'">'+App2.learnPeriod[nuM-1].dataLabel+'</span>';
}
$(".prepend").before(teaPeriodHtml);
  2. 让返回来的数据被选中。
    a.$('.AA .BB[value='+val+']').addClass('sklx-hover');
    b.让下拉框选中：
$('.AA').find('option').each(function (index,el){
if($(this).attr('value')-1 == CC){
$(this).attr('selected','selected');
}
})
  当然，后台还会返回很多各种各样稀奇古怪的东西，还需要前端的各位程序员机智应对。
8.刷新当前页
  往往在ajax⾛到success的函数后，如果成功了，⼀般会选择刷新当前页或者选择跳新页⾯。刷新当前页⽐如说是编辑页⾯有弹出框，在弹出框编辑好后，点击确定，弹出框消失，刷新当前页，更新当前页编辑的内容，这种⽅法为：
$.ajax({
url: '',//接⼝地址
type: '',//请求类型：get post
jquery在项目里是干啥的
data: ,//参数
contentType : 'application/json;charset=utf-8',
dataType: "JSON",//数据类型
success: function(data){
de == 0){//成功
//刷新当前页
load(true);
}else{
layer.msg('未编辑成功，请重新编辑');
}
}
});
9.跳转其他页
$.ajax({
url: '',//接⼝地址
type: '',//请求类型：get post
data: ,//参数
contentType : 'application/json;charset=utf-8',      dataType: "JSON",//数据类型
success: function(data){
de == 0){//成功
/
/跳转其他页
window.location.href='此处是接⼝';
}else{
layer.msg('未编辑成功，请重新编辑');
}
}
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。