阿聊 2019-01-12 10:51 采纳率: 0%
浏览 1901

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

问题:通过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>
  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2022-10-30 05:59
    关注
    不知道你这个问题是否已经解决, 如果还没有解决的话:

    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    评论

报告相同问题?

悬赏问题

  • ¥15 outlook无法配置成功
  • ¥15 Pwm双极模式H桥驱动控制电机
  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据,怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换