ajax发送json请求（ajax请求的五个步骤）
程序员文章站
2023-11-18 09:52:22
本小节基本要求了解html文件要点：json格式的数据javascript(简称js)语言样式选择器之id选择器目前样式：目标：利用ajax动态获取文章数据，成就动态页面。step1：构建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篇文章标题
什么？你问我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>我都用了哪些新知识：
- ajax：
一种用于请求网址的技术
- javascript(简称js)：
一种脚本语言，你所看到的所有网站都离不开这门技术
- css选择器之id选择器：
样式选择器，前几篇讲过类选择器，详细了解入口