目前樣式：

目標：

利用Ajax動態獲取文章數據，成就動態頁面。

Step1：構建JSON格式數據

新建文件夾，建立一個.json後綴的文件，這個文件里存放的是我們的文章數據。

代碼如下：

{
  "hot": [
    {  "id": 1,
      "title": "Zabbix"
    },
    {
      "id": 2,
      "title": "Prometheus"
    },
    {
      "id": 3,
      "title": "Java yyds!"
    },
    {
      "id": 4,
      "title": "什麼？卡卡羅特對波又輸了？"
    },
    {
      "id": 5,
      "title": "一千零一夜"
    },
    {
      "id": 100,
      "title": "問風"
    }
  ],
  "new": [
    {  "id": 6,
      "title": "ElasticSearch"
    },
    {
      "id": 7,
      "title": "Kafka"
    },
    {
      "id": 8,
      "title": "從你的全世界路過"
    },
    {
      "id": 9,
      "title": "如果那天可以好好聊聊"
    },
    {
      "id": 10,
      "title": "帶着記憶回到14年"
    },
    {
      "id": 11,
      "title": "孤流拒海"
    }
  ]
}

hot:最熱文章列表
new:最新文章列表
共計12篇文章標題

什麼？你問我JSON格式的數據為什麼長這樣？為什麼帶個{},為什麼帶個[ ]?

因為大家都這樣寫，所有就成這樣咯。

ps：現在開發網站幾乎全部都是用的json格式構建的數據。學會這種格式，難道不重要嗎？

這是一個很火的學習網站：www.baidu.com

Step2：Id選擇器使用

這點作了修改，給ul添加了Id選擇器。

為什麼添加ID選擇器，看Step4

Step3：引入jquery文件:這是個工具

下載地址：
https://code.jquery.com/jquery-1.11.0.min.js

直接右鍵屏幕另存為就可以了。

創建js文件夾，將文件放入，並且在body.html頁面引入該文件：如下：

<script  src="../js/jquery-3.1.1.js"></script>

Step4: Ajax請求json文件，獲取json數據

代碼如下：

<script type="text/javascript">

    function getData() {
        $.ajax({
            type: "GET",
            url: "../data/article.json",
            dataType: "json",
            headers:{'Content-Type':'application/json;charset=utf8'},
            success: function (res) {

                let hot_w = res.hot;
                let new_w = res.new;

                var hot_html = ""
                var new_html = ""

                hot_w.forEach(function (d) {

                    var h = "<li>" + d.title + "</li>"

                    hot_html += h;

                })

                new_w.forEach(function (d) {

                    var n = "<li>" + d.title + "</li>"

                    new_html += n;
                })

                console.log($.parseHTML(hot_html))

                console.log($(".hot .card-body ul"))
                $("#hot-w").append($.parseHTML(hot_html))
                $("#new-w").append($.parseHTML(new_html))
            }
        })
    }

    getData()

</script>

Step5：右鍵運行，結果如下：

附本篇body.html中的所有追加的代碼：

JS部分：

<script  src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">

    function getData() {
        $.ajax({
            type: "GET",
            url: "../data/article.json",
            dataType: "json",
            headers:{'Content-Type':'application/json;charset=utf8'},
            success: function (res) {

                let hot_w = res.hot;
                let new_w = res.new;

                var hot_html = ""
                var new_html = ""

                hot_w.forEach(function (d) {

                    var h = "<li>" + d.title + "</li>"

                    hot_html += h;

                })

                new_w.forEach(function (d) {

                    var n = "<li>" + d.title + "</li>"

                    new_html += n;
                })

                console.log($.parseHTML(hot_html))

                console.log($(".hot .card-body ul"))
                $("#hot-w").append($.parseHTML(hot_html))
                $("#new-w").append($.parseHTML(new_html))
            }
        })
    }

    getData()

</script>

body部分：

<body>

<div class="tbody">
    <main class="is-main">
        <div class="main-left">
            <div class="gonggao">
                哈嘍，我是公告位
            </div>
            <div class="panel">
                <div class="guangao">哈嘍，我是廣告位</div>
            </div>
            <div class="content">
                <div class="card">
                    <div class="hot">
                        我是熱門文章
                    </div>
                    <div class="card-body">
                            <ul id="hot-w">

                            </ul>
                    </div>
                </div>
                <div class="card">
                    <div class="new">
                        我是最新文章
                    </div>
                    <div class="card-body">
                        <ul id="new-w">

                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-right">
<!--            <div class="my-info">-->
<!--                    我是個人信息框-->
<!--            </div>-->
        </div>
    </main>
</div>


</body>