qie_wei
阿聊
2019-01-12 10:51

MUI :通过ajax得到的json数据如何通过juicer渲染显示

  • html5
  • json
  • ajax

问题:通过ajax得到的json数据如何通过juicer渲染显示?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
   <script src="js/juicer-min.js"></script>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">list</h1>
    </header>

    <div class="mui-content">
         <div class="mui-card">     
            <ul class="mui-table-view" id="Con">
               <!--模版......-->
            </ul>
        </div>
    </div>

<!--模版......-->
<script id = "tpl" type = "text/template">
        {@each data.list as it, k}
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="">
                    <div class="mui-media-body">
                            ${it.name}
                        <p class="mui-ellipsis">${it.contain}</p>
                    </div>
                </a>

            </li>
       {@/each}
</script>

<script type="text/javascript" charset="UTF-8"> 
    mui.init(); 
    var tpl = document.getElementById("tpl").innerHTML;

        mui.plusReady(function(){

             //alert("come");
             mui.ajax(
                    "http://192.168.56.1:8888/test/testServlet",
                        {
                            async : true,
                            dataType:'json',//服务器返回json格式数据
                            type:'POST',//HTTP请求类型
                            timeout:10000,//超时时间设置为10秒;
                            headers:{'Content-Type':'application/x-www-form-urlencoded'},                 
                            success:function(data){
                                //alert(data.list[0].name); 
                                document.getElementById("Con").innerHTML=juicer(tpl,data);
                            },  
                            error:function(xhr,type,errorThrown){
                                //异常处理;
                                alert("error");
                                console.log(type);
                            }
                });        
        });

</script>
</body>
</html>
  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

0条回答