artTemplate下载
github地址：https://github.com/aui/art-template
文件在项目lib目录下的template-web.js
1.简单的json数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/template.js" ></script>
</head>
<body>
<div id="container"></div>
<script type="text/html" id="div">
<h1>{{name}}</h1>
<h2>{{age}}</h2>
</script>
<script type="text/javascript">
var data = {
name:"geekWeb",
age:22
}
var html = template('div',data);
document.getElementById("container").innerHTML = html;
</script>
</body>
</html>
2.带数组的json数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/template.js" ></script>
</head>
<body>
<div id="container"></div>
<script type="text/html" id="div">
<h1>{{name}}</h1>
<ul>
{{each lang as value i}}
<li>语言{{i+1}}:{{value}}</li>
{{/each}}
</ul>
</script>
<script type="text/javascript">
var data = {
name:"前端语言",
lang:['html','css','js']
}
var html = template('div',data);
document.getElementById("container").innerHTML = html;
</script>
</body>
</html>
3.数组中包含对象的json数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/template.js" ></script>
</head>
<body>
<div id="container"></div>
<script type="text/html" id="div">
<h1>{{name}}</h1>
<ul>
{{each lang}}
<li>语言:{{$value.title}} 定义:{{$value.add}}</li>
{{/each}}
</ul>
</script>
<script type="text/javascript">
var data = {
name:"前端语言",
lang:[{
title:"html",
add:"超文本标记语言"
},{
title:"css",
add:"层叠样式表"
},{
title:"javaScript",
add:"添加动态特效"
}]
}
var html = template('div',data);
document.getElementById("container").innerHTML = html;
</script>
</body>
</html>
注意：在模板中，只能使用json对象，而不能使用json数组，因为arttemplate里只能获取json对象里的属性。
后台转json字符串
导入fastjson包，点击下载
user类
package com.neu.study.pojo;
public class User {
private Long id;
private String name;
private String password;
private String authority;
private String email;
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getAuthority() {
return authority;
}
public void setAuthority(String authority) {
this.authority = authority;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
传输包装类
package com.neu.study.util;
/**
* Created by ttc on 2018/7/12.
*/
public class Data {
public Object data;
public Data(Object data) {
this.data = data;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
}
main方法
User user = new User();
user.setId((long)1);
user.setName("zhangsan");
List<User> list = new ArrayList<>();
list.add(user);
User user2 = new User();
user2.setId((long)2);
user2.setName("lisi");
list.add(user2);
response.getWriter().print(JSON.toJSONString(new Data(list)));
注意：传到前台的是json字符串，并不是json对象，所以在js中要使用JSON.parse()方法把json字符串转成json对象使用。由于artTemplate的特殊性（上面的注意中提到过），所以不能直接将List转成json字符串传到前台，要将List做为一个类的属性，然后将这个类转成json字符串传到前台。
实例 artTemplate +servlet+fastjson
前台
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="template-web.js"></script>
<script>
window.onload = function () {
var ajax = new XMLHttpRequest();
ajax.open('get','/getjson.do',true);
ajax.send();
ajax.onload = function () {
var html = template('div',JSON.parse(ajax.responseText));
console.log(ajax.responseText);
document.querySelector("#content").innerHTML = html;
}
}
</script>
</head>
<body>
<div id="content">
<ul>
<script type="text/html" id="div">
{{each data value index}}
<li>{{value.id}}-----{{value.name}}</li>
{{/each}}
</script>
</ul>
</div>
</body>
</html>
后台
package com.neu.study.servlet;
import com.alibaba.fastjson.JSON;
import com.neu.study.pojo.User;
import com.neu.study.util.Data;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
/**
* Created by ttc on 2018/7/12.
*/
@WebServlet(name = "JsonServlet",urlPatterns = "/getjson.do")
public class JsonServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
User user = new User();
user.setId((long)1);
user.setName("zhangsan");
List<User> list = new ArrayList<>();
list.add(user);
User user2 = new User();
user2.setId((long)2);
user2.setName("lisi");
list.add(user2);
response.getWriter().print(JSON.toJSONString(new Data(list)));
}
}
