我是这样使用template.js来异步渲染数据的demo

最新推荐文章于 2022-12-13 14:47:20 发布

weixin_34400525

最新推荐文章于 2022-12-13 14:47:20 发布

阅读量321

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/xiangru0921/p/6689556.html

本文介绍如何利用Template.js和jQuery实现从JSON数据源动态生成HTML列表的过程。通过Ajax获取JSON格式的数据，并使用Template.js模板引擎进行数据绑定，最终在页面上显示国家地区列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接来代码吧！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul id="wrap">
            <script id="tpl" type="text/html">
                <%if(result){%>
                    <%for(var i=0;i<result.length;i++){%>
                        <li><%=result[i].area_name%></li>
                    <%}%>
                <%}%>
            </script>
        </ul>
        <script src="js/jquery/jquery-1.8.3.min.js" ></script>
        <script src="js/template/template.js"></script>
        <script>
            $(function(){
            
                $.ajax({
                     type: "get", 
                     url: "js/json/package.json",       
                     data:{//后台需要的参数
                         flag:"wap"
                     }, 
                     dataType: "json",
                     success: function(data){
//                        var data = {
//                            result: [
//                                {
//                                    area_id: "535",
//                                    area_name: "美国",
//                                    pid: "45055"
//                                },
//                                {
//                                    area_id: "536",
//                                    area_name: "加拿大",
//                                    pid: "45055"
//                                }
//                            ],
//                            error: "0",
//                            msg: "",
//                            total: 0,
//                            hasmore: false
//                        }
                         
                        if (data && data.error === "0") {
                            console.log(data);
                            var html = template.render('tpl',data);
                            $('#wrap').html(html);
                        }
                    }
                });
            });
        </script>
    </body>
</html>

package.json：

{
    "result": [
        {
            "area_id": "535",
            "area_name": "美国",
            "pid": "45055"
        },
        {
            "area_id": "536",
            "area_name": "加拿大",
            "pid": "45055"
        }
    ],
    "error": "0",
    "msg": "",
    "total": 0,
    "hasmore": false
}

需要的js文件就是 template.js和jQuery

（template.js查看文件）！！！！

转载于:https://www.cnblogs.com/xiangru0921/p/6689556.html