Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.6k views
in Technique[技术] by (71.8m points)

artTemplate Ajax json 渲染 得到api数据后 这样为什么不显示?

<link rel="stylesheet" href="../bfq/APlayer.min.css">
<script src="../bfq/APlayer.min.js"></script>
</head>
<body>

<div class="mui-table-view" id="newsinfo"></div>

<script id="lists" type="text/html">

//这个是播放器代码不显示~

<div id="aplayer"></div>
<script>
const ap = new APlayer({

  container: document.getElementById('aplayer'),
  audio: [{
      name: 'name',
      artist: 'artist',
      url: '{{@mp3}}',
      cover: 'cover.jpg'
  }]

});
</script>

</script>

    <script src="../js/template-web.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        mui.init();
        //添加newId自定义事件监听
        window.addEventListener('id', function(event) {
            //获得事件参数
            var id = event.detail.id;
            //根据id向服务器请求新闻详情    
        //plusReady,用来定义加载dom后的操作
        mui.plusReady(function() {
            
            mui.ajax('https://网址.com/'+ id, {
                /* data 是参数,我们这里不需要,我们只是从 api获取数据
                data: {
                    username: 'username',
                    password: 'password'
                },
                */
                escape: false,
                dataType: 'json', //服务器返回json格式数据
                type: 'get', //HTTP请求类型
                timeout: 10000, //超时时间设置为10秒;
                headers: {
                    'Content-Type': 'application/json'
                },
                success: function(data) {                
                    //我们现在控制台打印一下请求结果
                    console.log(data);   
                    //然后获取json数据中的具体值
                    //console.log(data.stories[0].title)            
                    
                    var html = template('lists', data);
                   
                    document.getElementById("newsinfo").innerHTML = html;
                    console.log(html);
                },
                
                error: function(xhr, type, errorThrown) {
                    //异常处理;
                    console.log(type);
                }
            });
        });
        });            
    </script>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...