如何把json数据加载到js变量中？

如何把json数据加载到js变量中？

<!DOCTYPE html>

<html>

<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"

}

]

这个代码应该如何完善？

幕布斯7119047

浏览 1115回答 5

5回答

翻过高山走不出你

ajax正解，比如用jQuery就可以这：// 假设你的data.json就在网站test目录下：$.getJSON("/test/data.json", function(data){    content = data;        // 然后继续用content就行了})// 注意不要在这里用content，要在上面那个function里面（因为$.getJSON是异步的）

0

0

SMILET

定义一个id值，每次下拉的时候执行json数据循环，找出id+1对应的数据就可以了啊！var data = json中的数据，然后foreach一下就行。

0

0

12345678_0001

先把data.json解析，再赋值给content，然后通过id值进行循环遍历数据，每次下拉一下id就++；就可以了。。。

0

0

慕码人8056858

不管是上拉还是下拉，处理下防抖json的话就用ajax拉，可以直接写相对地址，后台上线以后换下url加点data限定下要拉的数据(比如可以传最后一个id和拉取数量)就行了如果就是本地需求（比如就是个年会抽奖或者是直接在你本机展示的原型，还不看代码那种），可以直接写成js，然后里边加个变量名比如var data之类的，然后你直接加载这个js用这个变量就好

0

0

随时随地看视频慕课网APP

相关分类

JavaScript