使用Jackson和artTemplate来实现List-->json-->html之间的整体转换

使用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.最终效果