如何把json数据加载到js变量中？ - 知否问答 - 万象云+社区

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>实现滚动加载</title> <style> * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } li, ul { list-style: none; } .container { width: 980px; height: 600px; margin: 0 auto; overflow: auto; } .news__item { height: 80px; margin-bottom: 20px; border: 1px solid #eee; } </style> </head> <body> <div class="container"> <ul class="news" id="news"> <li class="news__item">1、hello world</li> <li class="news__item">2、hello world</li> <li class="news__item">3、hello world</li> <li class="news__item">4、hello world</li> <li class="news__item">5、hello world</li> <li class="news__item">6、hello world</li> </ul> </div> <script> var wrapper = document.querySelector('.container') var container = document.querySelector('.news') wrapper.addEventListener('scroll', function() { var scrollTop = wrapper.scrollTop; if (scrollTop + wrapper.clientHeight >= container.clientHeight) { // 触发加载数据 loadMore(); } }); // 渲染数据 function loadMore() { var content = '这是数据<br/>'; var node = document.getElementById('news'); // 向节点内插入新生成的数据 var oldContent = node.innerHTML; node.innerHTML = oldContent + content; } </script> </body> </html>

[ { "id":"001", "title":"百度", "url":"http://www.baidu.com" }, { "id":"002", "title":"阿里", "url":"www.alibaba.com" }, { "id":"003", "title":"腾讯", "url":"www.qq.com" } ]

回答动态