如何把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>上面代码是一个下拉自动加载数据的，主要是加载var content='这里面的数据';
但是我总不能把数据写死吧，我有个data.json的数据文件
我想把data.json的数据加载在var content='';中,并且每向下拉一下，就加载一个id的数据
data.json
[
{
"id":"001",
"title":"百度",
"url":"http://www.baidu.com"
},
{
"id":"002",
"title":"阿里",
"url":"www.alibaba.com"
},
{
"id":"003",
"title":"腾讯",
"url":"www.qq.com"
}
] 这个代码应该如何完善？
繁华开满天机浏览 521回答 5
5回答
-
江户川乱折腾
ajax正解，比如用jQuery就可以这： // 假设你的data.json就在网站test目录下： $.getJSON("/test/data.json", function(data){ content = data; // 然后继续用content就行了 }) // 注意不要在这里用content，要在上面那个function里面（因为$.getJSON是异步的） -
狐的传说
定义一个id值，每次下拉的时候执行json数据循环，找出id+1对应的数据就可以了啊！var data = json中的数据，然后foreach一下就行。 -
一只名叫tom的猫
先把data.json解析，再赋值给content，然后通过id值进行循环遍历数据，每次下拉一下id就++；就可以了。。。 -
慕后森
不管是上拉还是下拉，处理下防抖 json的话就用ajax拉，可以直接写相对地址，后台上线以后换下url加点data限定下要拉的数据(比如可以传最后一个id和拉取数量)就行了 如果就是本地需求（比如就是个年会抽奖或者是直接在你本机展示的原型，还不看代码那种），可以直接写成js，然后里边加个变量名比如var data之类的，然后你直接加载这个js用这个变量就好
随时随地看视频慕课网APP
PHP