在實(shí)際開發(fā)中膛锭，我們會使用模板引擎來提高開發(fā)效率奢入。而眾多的模板引擎中，artTemplate無論就速度，兼容性還是使用人數(shù)上兵拢，都占絕對優(yōu)勢债热。這里我將簡單地介紹下artTemplate的常見用法舶沿。
需要先使用一個(gè)type="text/html"的script標(biāo)簽存放模板
1.簡單的json數(shù)據(jù)
<!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.帶數(shù)組的json數(shù)據(jù)
<!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.數(shù)組中包含對象的json數(shù)據(jù)
<!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:"超文本標(biāo)記語言"
},{
title:"css",
add:"層疊樣式表"
},{
title:"javaScript",
add:"添加動(dòng)態(tài)特效"
}]
}
var html = template('div',data);
document.getElementById("container").innerHTML = html;
</script>
</body>
</html>
一個(gè)ajax+artTemplate+servlet+fastjson的綜合小實(shí)例
前臺：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script src="template.js"></script>
<script>
//創(chuàng)建一個(gè)XMLHttpRequest類型的對象ajaxReq
var ajaxReq = new XMLHttpRequest();
window.onload = function() {
//用ajaxReq打開一個(gè)連接
ajaxReq.open("get","ajax.do",true);
//發(fā)送請求給服務(wù)器
ajaxReq.send(null);
//設(shè)置一個(gè)回調(diào)函數(shù)州邢，用來處理服務(wù)器的回應(yīng)渔扎。
ajaxReq.onreadystatechange = onReceive;
}
function onReceive() {
if (ajaxReq.readyState === 4) {
if (ajaxReq.status === 200) {
//響應(yīng)成功,做一些事情
var jsonObj = JSON.parse(ajaxReq.responseText);//不要忘記將json字符串轉(zhuǎn)化為json對象
var html = template('test', jsonObj);
document.getElementById('content').innerHTML = html;
} else {
//響應(yīng)失敗,做一些事情
}
}
};
</script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<table>
<thead>
<td>姓名</td>
<td>年齡</td>
</thead>
{{each list as value i}}
<tr>
<td>{{value.name}}</td>
<td>{{value.age}}</td>
</tr>
{{/each}}
</table>
</script>
</body>
</html>
后臺：
public class Person {
public String name;
public int age;
}
public class Persons {
private List<Person> list;
public List<Person> getList() {
return list;
}
public void setList(List<Person> list) {
this.list = list;
}
}
import com.alibaba.fastjson.JSON;
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.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
/**
-
Created by ttc on 17-5-26.
*/
@WebServlet(name = "Servlet",urlPatterns = "/ajax.do")
public class Servlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Person person = new Person();
person.name = "huochai";
person.age = 29;String strJson = JSON.toJSONString(person); System.out.println(strJson); Person person2 = new Person(); person2.name = "huochai2"; person2.age = 292; List<Person> lst = new ArrayList<Person>(); lst.add(person); lst.add(person2); Persons persons = new Persons(); persons.setList(lst); String strJson2 = JSON.toJSONString(persons); System.out.println(strJson2); PrintWriter pw = response.getWriter(); pw.println(strJson2);}
}
