【求解答】js获取json用模板引擎渲染但是无法显示

感觉代码没问题,但是显示不出,求解答

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="renderer" content="webkit">
        <!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
        <title>前途院校库-全球院校采访精彩回顾</title>
        <!-- Bootstrap -->
        <link href="lib/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
            <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="css/index.css">
        <script src="js/jquery1.11.3.js"></script>
        <script src="lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
        <script src="lib/layer/layer.js"></script>
        <!--<script type="text/javascript" src="artTemp.php?"></script>-->
        <!--<script src="lib/layer/mobile/layer.js"></script>-->

    </head>

    <body>
        <header class="container-fluid ">

            <img class="top_pc  img-responsive center-block hidden-xs row" src="./img/top.jpg" alt="">
            <img class="top_mobi  img-responsive center-block visible-xs-block row" src="./img/top_mobi.jpg" alt="">
        </header>

        <div class="container">
            <ul class="row country">
                <li class="col-xs-4 col-md-3 active">美国</li>
                <li class="col-xs-4 col-md-3">英国</li>
                <li class="col-xs-4 col-md-3">加拿大</li>
                <li class="col-xs-4 col-md-3">澳大利亚</li>
                <li class="col-xs-4 col-md-3">新西兰</li>
                <li class="col-xs-4 col-md-3">欧洲</li>
                <li class="col-xs-4 col-md-3">亚洲</li>
            </ul>
        </div>
        <div class="line"></div>
        <div class="container-fluid content ">
            <div class="container neirong">

                <div class="left fl">
                    <div class="titless ">
                        热门视频
                    </div>
                    <div class="medialist " id="medialist">

                        <!--<div class="yitiao clearfix">
                                <div class="reload pull-left">
                                    <img src="img/reload1.jpg" alt="" />
                                </div>
                                <div class="info pull-left">
                                    <div class='top'>
                                        <span class="classify">家庭教育</span>
                                        <span class="title">父母该如何做好家庭教育</span>
                                        <span class="pubdate pull-right"></span>
                                        <span class="glyphicon glyphicon-time pull-right"></span>
                                        
                                    </div>
                                    <p class='intro text-overflow'>
                                            好的教育,应该是父母通过孩子这把镜子,不断发现自我、修正自我、挖掘自我,并用新我来为孩子做示范和表率。我们是在教育孩子的过程中,遇见了更好的自己
                                    </p>
                                    <div class="bot">
                                        <span class="jia">嘉</span>
                                        <span class="name">刘亚春</span>
                                        <span class="zhi">职</span>
                                        <span class="position">新东方前途出国留学家庭预备营负责人</span>
                                        <span class="glyphicon glyphicon-eye-open"></span>
                                        <span class="click-rite">888</span>
                                    </div>
                                </div>
                            </div>
                        -->

                    </div>
                </div>

                <!--模板引擎-->

                <script src="lib/template-web.js"></script>

                <script id="template" type="text/html">
                    <%for (var i =1; i<items.length;i++){%>
                    <div class="yitiao clearfix">
                        <div class="reload pull-left">
                            <img src="<%=data[i].imgsrc%>" alt="" />
                        </div>
                        <div class="info pull-left">
                            <div class='top'>
                                <span class="classify"><%=data[i].classify%></span>
                                <span class="title"><%=data[i].title%></span>
                                <span class="pubdate pull-right"><%=data[i].pubdate%></span>
                                <span class="glyphicon glyphicon-time pull-right"></span>

                            </div>
                            <p class='intro text-overflow'>
                                <%=data[i].intro%>
                            </p>
                            <div class="bot">
                                <span class="jia">嘉</span>
                                <span class="name"><%=data[i].name%></span>
                                <span class="zhi">职</span>
                                <span class="position"><%=data[i].position%></span>
                                <span class="glyphicon glyphicon-eye-open"></span>
                                <span class="click-rite">888</span>
                            </div>
                        </div>
                    </div>
                    <%}%>

                </script>
                
                <!--模板引擎-->
                
                
                <script>
                    $(function() {
                        $('.titless').on('click', function() {
                            $.ajax({
                                url: 'artTem.php',
                                type: 'get',
                                success: function(data) {
                                    console.log(data);
                                    //转化为js对象
                                    var jsArr = JSON.parse(data);
                                    //包装为js对象
                                    var obj = {
                                        items:jsArr
                                    };
                                    //调用模板引擎方法,填充数据
                                    var result = template('template', obj);
                                    $('.medialist').append(result);

                                    //弹窗    
                                    this.layer.open({
                                        type: 2,
                                        title: false,
                                        area: ['630px', '360px'],
                                        shade: 0.8,
                                        closeBtn: 0,
                                        shadeClose: true,
                                        content: data[urlpc()]
                                    });
                                    layer.msg('点击任意处关闭');

                                }
                            })

                        })

                    })
                </script>

                

                <div class="right fr advert">
                    <div class="zixun">
                        <span class="title">热门资讯</span>
                        <span class="title fr">
                        <a href="#">更多</a>
                    </span>
                        <div class="link">
                            <img src="./img/America.jpg" alt="">
                            <img src="./img/xinnan.jpg" alt="">
                        </div>
                    </div>
                    <div class="chanpin">
                        <span class="title">热门产品</span>
                        <span class="title fr">
                        <a href="#">更多</a>
                    </span>
                        <div class="link">
                            <img src="./img/yingling.jpg" alt="">
                            <img src="./img/beijing.jpg" alt="">
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <script src="js/index.js"></script>
    </body>

</html>
阅读 3k
2 个回答

data[i]?不是item[i]

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题