AJAX获取数据，EJS创建HTML模板的简单项目使用

来源：互联网发布：python 数组去除重复编辑：程序博客网时间：2024/05/23 01:20

有一个需求，需要根据后台的数据动态创建导航标签栏。因为数据是有三个层级的，因此选择了ejs这个工具来帮我创建html模板部分。
不BB，看代码。
HTML:

<script type="text/template" id="navbar_ejs">      <ul class="nav navbar-nav navigation-content">        <!-- 因为第一个是首页标签，永远不会变，因此将第一个写死 -->        <li class="active" id="navigation-content-active"><a href="<%= data[0].url %>"><%= data[0].subject %></a></li>        <!-- 开始循环渲染第一层 -->        <% for(var i=1;i<data.length;i++){ %>        <li class="dropdown"><a href="<%= data[i].url %>" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><%= data[i].subject %><span class="caret"></span></a>          <!-- 第二层逻辑，先判断第二层有没有children，有就执行 -->          <% if(data[i].children){ %>            <ul class="dropdown-menu">                <!-- 开始渲染第二层 -->                <% for(var x=0;x<data[i].children.length;x++){ %>                  <% if(!data[i].children[x].children){ %>                    <li><a href="<%= data[i].children[x].url %>" target="_blank"><%= data[i].children[x].subject %></a> </li>                  <% } else{%>                    <li class="dropdown-submenu"><a href="<%= data[i].children[x].url %>"><%= data[i].children[x].subject %></a>                      <ul class="dropdown-menu">                        <!-- 第三层 -->                        <% for(var j=0;j<data[i].children[x].children.length;j++){ %>                          <li><a href=" <%= data[i].children[x].children[j].url %>" target="_blank"><%= data[i].children[x].children[j].subject %></a></li>                        <% } %>                      </ul>                    </li>                  <% } %>                <% } %>                       </ul>          <% } %>        </li>        <% } %>       </ul>    </script>

AJAX：

$.ajax({        url: api_url,        type: 'get',        dataType: 'json',        //data需要传入当前账户的ID,从cookie中直接获取        data: {action:"init",uid:Cookies.get("uid")},        success:function(data){          var result = data.data;          //ejs创建html模板          var temp = $("#navbar_ejs").html();          var html = ejs.render(temp,{data:result});          $("#navbar").html(html);        },        });

数据格式：

data:{  data:[    {id:"1",subject:"first",url:"u1"},    {id:"2",subject:"second",url:"#",children:[{    id:"2.1",subject:"second_first",url:"u2_1"}]},    {id:"3",subject:"thired",url:"#",children:[{    id:"3.1",subject:"thired_first",url:"#",children:[{id:"3.11",subject:"thired_first_first",url:"ul3_1_1"}]}]},  ]}

成品图

ejs使用方法：每段js的代码都必须用<%作为开头，%>作为结尾。

<% code %>,code部分是JS语句，逻辑表达，比如if,for等等
<%= code %>,code部分是数据输出结果，比如data.id,data.url等等

关于ejs的介绍，官方文档惜字如金，建议参考zhangxin09的博客。

不过用vue实现，代码更简洁美观。此处去除了css样式，只有逻辑。

<ul id="app1">        <li v-for="item in items" v-if="!item.child">            <a :href="item.url">{{item.id}}</a>        </li>        <li v-for="item in items" v-if="item.child">            <a :href="item.url">{{item.id}}</a>            <ul>                <li v-for="key in item.child">                <a :href="key.url">{{key.id}}</a>                    <ul>                    <li v-for="thirkey in key.child" v-if="key.child">                        <a :href="thirkey.url">{{thirkey.id}}</a>                           </li>                    </ul>                </li>            </ul>        </li>    </ul>

var data = [{id:"id1",url:"url1"},{id:"id11",url:"url11"},{id:"id2",url:"url2",child:[{id:"chid2",url:"churl2"}]},    {id:"id3",url:"url3",child:[{id:"chid3",url:"churl3",child:[{id:"chid33",url:"churl33"}]}]},    ];    var app1 = new Vue({        el:"#app1",        data:{            items:data        }    });

有一个疑问，如果后台传来一个大于手写逻辑层数（这里是3层）的数据咋办？该如何解决？求指教~~~

0 0