template使用

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();
})
posted @ 2018-07-19 16:25  坚持就是胜利66  阅读(301)  评论(0)    收藏  举报