请问在HTML页面如何循环显示后台传过来的数据列表???在JSP页面用forEach循环显示,那么HTML如何做呢???

淡漠呐情 发布于 2017/02/06 16:42
阅读 2K+
收藏 1

在JSP页面用forEach循环显示,那么HTML如何做呢???貌似HTML页面不能用forEach呀!!!

加载中
0
Eric_林
Eric_林

html里面跟后台数据互动只有js一个方法,利用ajax

 

0
风情万种
风情万种

jquery $.each 

0
宁_

首先引入underscore.js

页面标签定义(以下拉为例,其他也可以):

<select id="list">
    <script type="text/template">
            <!--需要循环显示的列表-->
            <option class="option" value="<%= data.XXX%>">//可以直接赋值value、attr
                <%= data.XXX%>//可以多个 <%= data.XXX%>
            </option>
    </script>
</select>

调用封装方法赋值:

xjax返回的数据:
success:function(data){
    var name = document.getElementById("list");//获取的是<script type="text/template"></script>上一个的标签元素
    for (var i = 0; i < data.length; i++) {
        //name是获取的节点也就是这里的select标签,第三个参数是定义标签<%= data.XXX%>里data.(自己定义)
        renderTemp(data[i], name, 'data')
    }
}
可能出现的问题:异步循环显示时标签的内容会叠加记得$(".option").remove();
如果需要赋值的标签外还有一个不需要赋值标签可以使用.empty();

封装方法:

function renderTemp(data, el, varName, isReplace) {
    // console.log('renderNote: ', data)
    document.getElementById('');
    if (!el._temp) {
        var $script = $(el).find('script');
        el._temp  = _.template($script.text(), {variable: varName});
        $script.replaceWith(el._temp(data));
    } else if (isReplace) {
        $(el).children().eq(0).replaceWith(el._temp(data))
    } else $(el).append(el._temp(data));

}

希望对你有帮助。

宁_
js下载地址:https://www.html.cn/doc/underscore/
返回顶部
顶部