已解決！js如何把服務(wù)器里面的json數(shù)據(jù)渲染輸出到html頁面

通過sql.php把數(shù)據(jù)庫里面的數(shù)據(jù)輸出為json格式的數(shù)據(jù)
得到的文件為test.json
格式如下：

{ 
    "resname":"百度", 
    "resimg":"http://www.baidu.com/1.jpg",
    "resint":"2018-1-18",
    "resurl":"http://www.baidu.com/1.apk",
    "pageview":"100"
},
{ 
    "resname":"阿里巴巴", 
    "resimg":"http://www.alibaba.com/1.jpg",
    "resint":"2018-1-18",
    "resurl":"http://www.alibaba.com/1.apk",
    "pageview":"200"
},
{ 
    "resname":"騰訊", 
    "resimg":"http://www.qq.com/1.jpg",
    "resint":"2018-1-18",
    "resurl":"http://www.qq.com/1.apk",
    "pageview":"300"
},

我想把這些數(shù)據(jù)通過js渲染到index.html頁面中
效果如下：

這是怎么實(shí)現(xiàn)的，只要加載index.html就立馬請求test.json
把json里面的數(shù)據(jù)加載到頁面。

2018-1-19 經(jīng)過學(xué)習(xí)，已經(jīng)解決問題
下面是本人學(xué)習(xí)后的。

1、首先通過json.php把數(shù)據(jù)庫給輸出為json格式的數(shù)據(jù)

[
    { 
        "id":1,
        "resname":"百度", 
        "resimg":"http://www.baidu.com/1.jpg",
        "resint":"2018-1-18",
        "resurl":"http://www.baidu.com/1.apk",
        "pageview":"100"
    },
    { 
        "id":2,
        "resname":"阿里巴巴", 
        "resimg":"http://www.alibaba.com/1.jpg",
        "resint":"2018-1-18",
        "resurl":"http://www.alibaba.com/1.apk",
        "pageview":"200"
    },
    { 
        "id":3,
        "resname":"騰訊", 
        "resimg":"http://www.qq.com/1.jpg",
        "resint":"2018-1-18",
        "resurl":"http://www.qq.com/1.apk",
        "pageview":"300"
    }
]

然后通過vue.js來解析

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

<head>
    <title>VUE解析JSON數(shù)據(jù)</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <div id="main">
        <table border=1>
            <tr>
                <td>ID</td>
                <td>資源名稱</td>
                <td>LOGO</td>
                <td>更新時間</td>
                <td>下載地址</td>
                <td>閱讀量</td>
            </tr>
            <tr v-for="r in rows">
                <td>{{r.id}}</td>
                <td>{{r.resname}}</td>
                <td><img src="{{r.resimg}}"/></td>
                <td>{{r.resint}}</td>
                <td><a href="{{r.resurl}}">點(diǎn)擊下載</a></td>
                <td>{{r.pageview}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    $(document).ready(function () {
        $.getJSON("data.json", function (result, status) {
            var v = new Vue({
                el: '#main',
                data: {
                    rows: result
                }
            })
        });
    });
</script>

</html>

最終運(yùn)行index.html

我用表格來展示了。

回答

編輯回答

巷尾

js可以直接解析json的數(shù)據(jù)

2018年4月24日 16:18

編輯回答

孤巷

直接復(fù)制粘貼運(yùn)行便可看到效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>tab</title>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        window.onload = function() {
                //這里是數(shù)組，若是對象格式僅為循環(huán)方式不同而已
                var json = [{
                    "resname": "百度",
                    "resimg": "http://www.baidu.com/1.jpg",
                    "resint": "2018-1-18",
                    "resurl": "http://www.baidu.com/1.apk",
                    "pageview": "100"
                }, {
                    "resname": "阿里巴巴",
                    "resimg": "http://www.alibaba.com/1.jpg",
                    "resint": "2018-1-18",
                    "resurl": "http://www.alibaba.com/1.apk",
                    "pageview": "200"
                }, {
                    "resname": "騰訊",
                    "resimg": "http://www.qq.com/1.jpg",
                    "resint": "2018-1-18",
                    "resurl": "http://www.qq.com/1.apk",
                    "pageview": "300"
                }];
                var tmp = "<ul>";
                for (var i = 0; i < json.length; i++) {
                    tmp += "<li>名字：" + json[i].resname + "</li>" +
                        "<li><img src='" + json[i].resimg + "' /></li>" +
                        "<li>日期：" + json[i].resint + "</li>" +
                        "<li><a download href='" + json[i].resurl + "'>" + json[i].resurl + "</a></li>" +
                        "<li>查看數(shù)：" + json[i].pageview + "</li>"
                }
                tmp += "</ul>";
                document.getElementById("box").innerHTML = tmp;
            }
    </script>
</body>
</html>

溫馨提示，這部分基礎(chǔ)內(nèi)容要多自己學(xué)習(xí)理解，問問題不如自己學(xué)的記得牢

2017年10月30日 04:32

編輯回答