本小节基本要求
- 了解html文件
要点：
- JSON格式的数据
- Javascript(简称js)语言
- 样式选择器之ID选择器
利用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 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>我都用了哪些新知识：
- ajax：
一种用于请求网址的技术
- Javascript(简称JS)：
一种脚本语言，你所看到的所有网站都离不开这门技术
- css选择器之id选择器：
样式选择器，前几篇讲过类选择器，详细了解入口
