当前位置：首页 > 生活百科

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

栏目：生活百科日期：2025-01-31浏览：0

本小节基本要求

了解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&>&<p class="tbody"&>    &<main class="is-main"&>        &<p class="main-left"&>            &<p class="gonggao"&>                哈喽，我是公告位            &</p&>            &<p class="panel"&>                &<p class="guangao"&>哈喽，我是广告位&</p&>            &</p&>            &<p class="content"&>                &<p class="card"&>                    &<p class="hot"&>                        我是热门文章                    &</p&>                    &<p class="card-body"&>                            &<ul id="hot-w"&>                            &</ul&>                    &</p&>                &</p&>                &<p class="card"&>                    &<p class="new"&>                        我是最新文章                    &</p&>                    &<p class="card-body"&>                        &<ul id="new-w"&>                        &</ul&>                    &</p&>                &</p&>            &</p&>        &</p&>        &<p class="main-right"&>&<!--            &<p class="my-info"&>--&>&<!--                    我是个人信息框--&>&<!--            &</p&>--&>        &</p&>    &</main&>&</p&>&</body&>