目前样式：

ajax发送json请求（ajax请求的五个步骤）

目标：

利用Ajax动态获取文章数据，成就动态页面。

Step1：构建JSON格式数据

新建文件夹，建立一个.json后缀的文件，这个文件里存放的是我们的文章数据。

ajax发送json请求（ajax请求的五个步骤）

代码如下：

{  "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选择器使用

ajax发送json请求（ajax请求的五个步骤）

这点作了修改，给ul添加了Id选择器。

为什么添加ID选择器，看Step4

Step3：引入jquery文件:这是个工具

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

直接右键屏幕另存为就可以了。

创建js文件夹，将文件放入，并且在body.html页面引入该文件：如下：

ajax发送json请求（ajax请求的五个步骤）

<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：右键运行，结果如下：

ajax发送json请求（ajax请求的五个步骤）

附本篇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>