ajax请求的五个步骤 ajax发送json请求 _发送

本小节基本要求

了解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篇文章标题

【ajax请求的五个步骤 ajax发送json请求】什么？你问我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页面引入该文件：如下：

文章插图
<scriptsrc="https://www.cnfyg.com/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部分：

<scriptsrc="https://www.cnfyg.com/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>

我都用了哪些新知识：