如何把json數(shù)據(jù)加載到j(luò)s變量中？

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

<head>
    <meta charset="UTF-8">
    <title>實(shí)現(xiàn)滾動(dòng)加載</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) {
                // 觸發(fā)加載數(shù)據(jù)        
                loadMore();
            }
        });
        // 渲染數(shù)據(jù)
        function loadMore() {
            var content = '這是數(shù)據(jù)<br/>';
            var node = document.getElementById('news');
            // 向節(jié)點(diǎn)內(nèi)插入新生成的數(shù)據(jù)    
            var oldContent = node.innerHTML;
            node.innerHTML = oldContent + content;
        }
    </script>
</body>

</html>

上面代碼是一個(gè)下拉自動(dòng)加載數(shù)據(jù)的，主要是加載var content='這里面的數(shù)據(jù)';
但是我總不能把數(shù)據(jù)寫死吧，我有個(gè)data.json的數(shù)據(jù)文件
我想把data.json的數(shù)據(jù)加載在var content='';中,并且每向下拉一下，就加載一個(gè)id的數(shù)據(jù)

data.json

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

這個(gè)代碼應(yīng)該如何完善？

回答

編輯回答

陌離殤

不管是上拉還是下拉，處理下防抖
json的話就用ajax拉，可以直接寫相對(duì)地址，后臺(tái)上線以后換下url加點(diǎn)data限定下要拉的數(shù)據(jù)(比如可以傳最后一個(gè)id和拉取數(shù)量)就行了
如果就是本地需求（比如就是個(gè)年會(huì)抽獎(jiǎng)或者是直接在你本機(jī)展示的原型，還不看代碼那種），可以直接寫成js，然后里邊加個(gè)變量名比如var data之類的，然后你直接加載這個(gè)js用這個(gè)變量就好

2018年2月21日 16:44

編輯回答

空痕

ajax正解，比如用jQuery就可以這：

// 假設(shè)你的data.json就在網(wǎng)站test目錄下：
$.getJSON("/test/data.json", function(data){
    content = data;
    
    // 然后繼續(xù)用content就行了
})

// 注意不要在這里用content，要在上面那個(gè)function里面（因?yàn)?.getJSON是異步的）

2017年4月26日 16:07

編輯回答

淡墨

你需要理解這個(gè)知識(shí)點(diǎn)。
1 - PHP 中數(shù)組是數(shù)組， JSON 是字符串。就意味著，可以向普通的字符串一樣，賦值到html 的任何地方，以字符串的形式出現(xiàn)。
2 - JS 中，json 是字符串, 在js中，可以把json字符串轉(zhuǎn)換成js對(duì)象。

重點(diǎn)：JSON是字符串；

栗子：
PHP: $json = '{"name":"字符串"}'; //php中的json字符串

JS: var json = '{"name":"字符串"}' //js中的json字符串

JS: var jsonObj = eval('{"name":"字符串"}');//js中 json字符串轉(zhuǎn)換成對(duì)象

然后就可以 jsonObj.name 調(diào)用了。
希望能幫到你

2017年3月20日 23:39

編輯回答