当前位置：首页 > news >正文

使用axios向服务器请求信息并渲染页面

news 2025/7/15 15:17:30

一、目的

使用axios从后端API获取图书列表数据并渲染至网页。
首先，编辑好原html框架：
在这里插入图片描述
从服务器获取存储信息：

控制台检查信息格式：

            console.log(result);console.log(htmlstr);

在这里插入图片描述
完成渲染：

二、Axios基础使用

axios使用语法：

axios({url:'目标资源地址'method://指定请求方法data://需要提交的数据
}).then((result)=>{//请求成功后执行的代码
})

mathod:‘POST’//提交数据，‘GET’//查询数据，默认为get(不区分大小写)，可以省略

**data：**提交数据

**params：**查询参数

axios会自动帮我们转换json格式，十分方便，我们只需要考虑如何获取并整理数据。

我们的目的是查询，所以method为get，省略不写：

axios({url: 'http://hmajax.itheima.net/api/books',params: {creator: 'evergreen'}}).then(result => {})

1. 引入Axios

引用代码从axios官网取得，在HTML中直接通过CDN引入：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. 发起GET请求

在我的项目中，需要获取创建者为"evergreen"的所有图书，API地址是http://hmajax.itheima.net/api/books。使用Axios发起请求：

axios({url: 'http://hmajax.itheima.net/api/books',params: {creator: 'evergreen'}
})

关键点：

url: 指定API地址
params: 用于传递查询参数，Axios会自动将其转换为URL查询字符串

三、代码解析

需要实现的功能：

定义获取图书列表的函数getbooklist()
使用Axios发起请求
处理响应数据并渲染到页面

function getbooklist() {axios({url: 'http://hmajax.itheima.net/api/books',params: {creator: 'evergreen'}}).then(result => {//控制台检查console.log(result);//获取图书列表const booklist = result.data.data//用map函数将图书字符串映射到html中//map：遍历图书列表并映射//join：整合为字符串输出，方便利用innerHTML写入页面const htmlstr = booklist.map((item,index) => {return `<li class="hei"><div class="number ha">${index+1}</div><span></span><div class="book ha">${item.bookname}</div><span></span><div class="author ha">${item.author}</div><span></span><div class="publish ha">${item.author}</div><span></span><div class="movement ha"><button class="btn1">删除</button><button class="btn2">修改</button></div></li>`}).join('')document.querySelector('ul').innerHTML=htmlstr})
}

完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav {height: 40px;width: 580px;}.nav h2 {float: left;padding: 0;margin: 0;}.nav .add {color: #fff;padding: 0;margin-top: 10px;float: right;height: 25px;line-height: 25px;width: 60px;text-align: center;background-color: rgb(58, 171, 240);border-radius: 3px;cursor: pointer;}header {background-color: gray;color: #e0e0e0;}.hei {width: 580px;font-family: 'Courier New', Courier, monospace;height: 60px;line-height: 60px;}.ha {display: inline-block;text-align: center;border-left: 1px #fff solid;}.number {width: 60px;}.book {width: 120px;}.author {width: 100px;}.publish {width: 100px;}.movement {width: 150px;}ul {padding: 0;}li {list-style: none;border-bottom: 1px solid gray;}</style>
</head><body><section><div class="nav"><h2>图书管理</h2><div class="add">+ 添加</div></div><header class="hei"><div class="number ha">序号</div><span></span><div class="book ha">书名</div><span></span><div class="author ha">作者</div><span></span><div class="publish ha">出版社</div><span></span><div class="movement ha">操作</div></header><ul><li class="hei"><div class="number ha">1</div><span></span><div class="book ha">荒原狼</div><span></span><div class="author ha">德·黑塞</div><span></span><div class="publish ha">人民出版社</div><span></span><div class="movement ha"><button class="btn1">删除</button><button class="btn2">修改</button></div></li></ul><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script><script>function getbooklist() {axios({url: 'http://hmajax.itheima.net/api/books',params: {creator: 'evergreen'}}).then(result => {console.log(result);const booklist = result.data.dataconst htmlstr = booklist.map((item,index) => {return `<li class="hei"><div class="number ha">${index+1}</div><span></span><div class="book ha">${item.bookname}</div><span></span><div class="author ha">${item.author}</div><span></span><div class="publish ha">${item.author}</div><span></span><div class="movement ha"><button class="btn1">删除</button><button class="btn2">修改</button></div></li>`}).join('')console.log(htmlstr);document.querySelector('ul').innerHTML=htmlstr})}getbooklist()</script></section>
</body></html>