使用Jackson和artTemplate来实现对象-->json-->html之间的整体转换
Jackson是一个比json-lib更方便的json数据转换框架，可以轻松的将Java对象转换成json数据和xml文档，同样也可以将json、xml转换成Java对象。
下载地址：https://pan.baidu.com/s/1bQGd8i
artTemplate是一个卓越的模板引擎，可以套用模板易于创作，artTemplate的库分为两种，一个是template.js，一个是template-native.js，第一个是简洁语法版，第二个是原生语法版，不可以混用，这里使用template.js。
下载地址：https://pan.baidu.com/s/1kVyTDhP
1.准备工作
下载jar包和js文件，文件总共有，然后将文件导入到相应的位置。之后就可以超方便地进行List-->json-->html之间的转换了。
2.使用Jackson将List转换为json字符串
List<Address> address=addressService.getAddressByUserId(user.getId());
ObjectMapper mapper = new ObjectMapper();
String addr=mapper.writeValueAsString(address);//使用mapper将列表转换为json字符串
response.setContentType("text/json;charset=UTF-8");
PrintWriter out=response.getWriter();
out.print(addr);
3.接收json数据，使用artTemplate转换为所需的html格式
<table class="table table-hover">
<thead>
<tr class="success">
<th>收货人</th>
<th>所在地区</th>
<th>详细地址</th>
<th>邮编</th>
<th>电话/手机</th>
<th>操作</th>
<th> </th>
</tr>
</thead>
<tbody id="address_table">
</tbody>
</table>
<script id="address_table_temp" type="text/html">
<tr>
<td>{{name}}</td>
<td>{{addr}}</td>
<td>{{detail_addr}}</td>
<td>{{postcode}}</td>
<td>{{phone}}</td>
<td>{{operate}}</td>
<td><button type="button" id="dbutton{{i}}" class="btn btn-primary btn-sm">{{other}}</button></td>
</tr>
</script>
function getAddress() {
$.getJSON("address", {
action : "getAddressByUserId"
}, function(address) {
$.each(address, function(i, addr) {
var flag="";
if(addr.flag==true){
flag="默认地址";
}
var data = {
name: addr.name,
addr:addr.addr,
detail_addr:addr.detail_addr,
postcode:addr.postcode,
phone:addr.phone,
operate:"修改 | 删除",
i:i,
other:flag
};
var html = template('address_table_temp', data);
$("#address_table").append(html);
if(addr.flag==false){
$("#dbutton"+i).css("display","none");
}
});
});
}
4.最终效果
转载请注明原文地址: https://ju.6miu.com/read-821.html
