1.java代码：
@Controller
public class TestController {
@RequestMapping("/indexPage")
public String indexPage(){
return "index";
}
@RequestMapping("/getUsers")
@ResponseBody
public Users getUsers(){
Users users = new Users();
users.setName("aa");
users.setAge("20");
users.setSex("男");
return users;
}
@RequestMapping("/getUsersList")
@ResponseBody
public List<Users> getUsersList(){
List<Users> usersList = new ArrayList<Users>();
Integer age = 20;
for(int i =0;i<10;i++){
String uuid = UUID.randomUUID().toString().substring(5);
Users users = new Users();
users.setName(uuid);
users.setAge(String.valueOf(age + i));
users.setSex("男");
usersList.add(users);
}
return usersList;
}
@RequestMapping("/getUsersDiv")
@ResponseBody
public Map getUsersDiv(){
Map resultMap = new HashMap();
resultMap.put("div","<span>这是一个样式</span>");
return resultMap;
}
}
2.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="userdiv1">
</div>
<script id="userInfo1" type="text/html">
<h4>用户信息：</h4>
用户名：<span>{{name}}</span>
年龄：<span>{{age}}</span>
性别：<span>{{sex}}</span>
</script>
<div id="userdiv2">
</div>
<script id="userInfo2" type="text/html">
<h4>用户信息：</h4>
用户名：<span>{{user.name}}</span>
年龄：<span>{{user.age}}</span>
性别：<span>{{user.sex}}</span>
</script>
<div id="userdiv3">
</div>
<script id="userInfo3" type="text/html">
<h4>用户信息：</h4>
{{each userList as user user_index}}
{{if user.age > 25}}
<div style="color: coral">
序号：<span>{{user_index}} </span>用户名：<span>{{user.name}}</span>
年龄：<span>{{user.age}}</span>
性别：<span>{{user.sex}}</span>
</div>
{{else}}
<div>
序号：<span>{{user_index}} </span>用户名：<span>{{user.name}}</span>
年龄：<span>{{user.age}}</span>
性别：<span>{{user.sex}}</span>
</div>
{{/if}}
{{/each}}
</script>
<div id="userdiv4">
</div>
<script id="userInfo4" type="text/html">
<h4>用户信息：</h4>
<div>{{userDiv.div}}</div>
<div>{{#userDiv.div}}</div>
</script>
<script src="../js/jquery1.11.2.min.js"></script>
<script src="../template/template.js"></script>
<script src="../index/index.js"></script>
</body>
</html>
3.js代码：
var index={}
index.init = function () {
}
index.init.prototype ={
template1 : function () {
$.ajax({
url:"/getUsers",
data:"",
type:"post",
success:function (result) {
var html = template("userInfo1",result)
$("#userdiv1").html(html)
},
error : function () {
}
})
},
template2 : function () {
$.ajax({
url:"/getUsers",
data:"",
type:"post",
success:function (result) {
var html = template("userInfo2",{"user" : result})
$("#userdiv2").html(html)
},
error : function () {
}
})
},
template3 : function () {
$.ajax({
url:"/getUsersList",
data:"",
type:"post",
success:function (result) {
var html = template("userInfo3",{"userList" : result})
$("#userdiv3").html(html)
},
error : function () {
}
})
},
template4 : function () {
$.ajax({
url:"/getUsersDiv",
data:"",
type:"post",
success:function (result) {
debugger;
var html = template("userInfo4",{"userDiv" : result})
$("#userdiv4").html(html)
},
error : function () {
}
})
}
}
$(function () {
var obj = new index.init();
obj.template1();
obj.template2();
obj.template3();
obj.template4();
})