Gson传递list（包括doT.js模板使用）-CSDN博客

本文链接：https://blog.csdn.net/qq_31749287/article/details/54292421

导包：gson-2.2.4.jar

导入js：jquery1.9.js

doT.min.js

GsonServlet.java:

package web;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

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 com.google.gson.Gson;

import domain.Emp;

/**
* Servlet implementation class GsonServlet
*/
@WebServlet("/GsonServlet")
public class GsonServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
* @see HttpServlet#HttpServlet()
*/
public GsonServlet() {
super();
// TODO Auto-generated constructor stub
}

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
Gson gson = new Gson();
List<Emp> emps = new ArrayList();
Emp emp = new Emp();
emp.setEmpno(7369);
emp.setEname("aaa");
Emp emp2 = new Emp();
emp2.setEmpno(8888);
emp2.setEname("bbbb");
emp2.setSal(1.0);

emps.add(emp);
emps.add(emp2);

String empsJson = gson.toJson(emps);
response.getWriter().print(empsJson);
}

/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
Gson gson = new Gson();
List<Emp> emps = new ArrayList();
Emp emp = new Emp();
emp.setEmpno(7369);
emp.setEname("aaa");
Emp emp2 = new Emp();
emp2.setEmpno(8888);
emp2.setEname("bbbb");
emp2.setSal(1.0);

emps.add(emp);
emps.add(emp2);

String empsJson = gson.toJson(emps);
response.getWriter().print(empsJson);
}

}

1.无模板：

gsongo2.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src='js/app/jquery1.9.js'></script>
<script type="text/javascript" src='js/app/doT.min.js'></script>
<script type="text/javascript" src='js/app/empList2.js'></script>
</head>
<body>
<div>
<table cellpadding="0" cellspacing="0" width="100%" class="table">
<thead>
<tr>
<th>工号</th>
<th>姓名</th>
<th>岗位</th>
<th>上司编号</th>
<th>入职时间</th>
<th>工资</th>
<th>佣金</th>
<th>部门号</th>
</tr>
</thead>
<tbody class="empList">
<tr>
<td class="empno"></td>
<td class="ename"></td>
<td class="job"></td>
<td class="mgr"></td>
<td class="hiredate"></td>
<td class="sal"></td>
<td class="comm"></td>
<td class="deptno"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

empList2.js：

/**
*
*/
$(
function(){
loadEmpList();
}
);
function loadEmpList(){
$.get("/GsonGo/web/GsonServlet",null,function(json){
var emps=eval("("+json+")");
var firstTr=$(".empList tr").first();
// firstTr.show();
$.each(emps,function(index){
var newTr=firstTr.clone();
var emp=emps[index];
newTr.find(".empno").html(emp.empno);
newTr.find(".ename").html(emp.ename);
newTr.find(".job").html(emp.job);
newTr.find(".mgr").html(emp.mgr);
newTr.find(".hiredate").html(emp.hiredate);
newTr.find(".sal").html(emp.sal);
newTr.find(".comm").html(emp.comm);
newTr.find(".deptno").html(emp.deptno);
$(".empList").append(newTr);
})
// firstTr.hide();
})
}

2.doT模板：

gsongo.html：

<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

<title>Tables - Aquarius - responsive admin panel</title>

<script type='text/javascript' src='js/app/jquery1.9.js'></script>
<script type='text/javascript' src='js/app/doT.min.js'></script>
<script type='text/javascript' src='js/app/empList.js'></script>
</head>
<body>
<div class="block-fluid">
<script type="text/dotTemplate" class="empTrTemplate">
{{~it:tr}}
<tr>
<td class="empno">{{=tr.empno}}</td>
<td class="ename">{{=tr.ename}}</td>
<td class="job">{{=tr.job}}</td>
<td class="mgr">{{=tr.mgr}}</td>
<td class="hiredate">{{=tr.hiredate}}</td>
<td class="sal">{{=tr.sal}}</td>
<td class="comm">{{=tr.comm}}</td>
<td class="deptno">{{=tr.deptno}}</td>
</tr>
{{~}}
</script>
<table cellpadding="0" cellspacing="0" width="100%" class="table">
<thead>
<tr>
<th>工号</th>
<th>姓名</th>
<th>岗位</th>
<th>上司编号</th>
<th>入职时间</th>
<th>工资</th>
<th>佣金</th>
<th>部门号</th>
</tr>
</thead>
<tbody class="empList"></tbody>

</table>

</div>
</body>
</html>

empList.js：

/**
*
*/
$(
function(){
loadEmpList();
}
);
//dot.js的方式
function loadEmpList(){
/*$.get("/GsonGo/web/GsonServlet",null,function(json){
//json+模板生成html

var obj = eval("("+json+")");
var dot=doT.template($(".empTrTemplate").html());
//放入要展示的区域
var htmlStr=dot(obj);
$(".empList").append(htmlStr);
console.info(pu.list);

});*/
$.post("/GsonGo/web/GsonServlet",null,function(json){
//json+模板生成html

var obj = eval("("+json+")");
var dot=doT.template($(".empTrTemplate").html());
//放入要展示的区域
var htmlStr=dot(obj);
$(".empList").append(htmlStr);
console.info(obj);//可以查看到某html 或者传递的内容

});
}

补充：将前台获取的json转成对象；

public static void json2obj(){
String jsonStr = "[{\"empno\":7369,\"ename\":\"aaa\"},{\"empno\":8888,\"ename\":\"bbbb\",\"sal\":1.0}]";
Object obj = gson.fromJson(jsonStr, ArrayList.class);
List<Emp> emps = (List)obj;
System.out.println(emps);
/* for(Emp e: emps){
System.out.println(e);
}*/
}