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

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

一、目的

使用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查询字符串

三、代码解析

需要实现的功能:

  1. 定义获取图书列表的函数getbooklist()
  2. 使用Axios发起请求
  3. 处理响应数据并渲染到页面
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>

效果:

在这里插入图片描述

说明:

1.使用.then()处理成功的响应
2.从响应结果中提取result.data.data获取实际图书数据
3.使用ES6模板字符串动态生成HTML
4. 通过map()方法将数据数组转换为HTML字符串数组
5. 最后将生成的HTML插入到页面中

注意点:

  • 资源地址是否正确
  • 是否提交了请求参数,以及请求参数是否能成功获取信息
  • 通过检查得到的对象格式来明确使用何种方法获取信息,如本次获得格式为对象数组,通过map映射将其取出并写入网页
http://www.lryc.cn/news/587982.html

相关文章:

  • DVWA靶场通关笔记-存储型XSS(Stored Medium级别)
  • TCP心跳机制详解
  • 多客户端-服务器(select,poll)
  • 多客户端 - 服务器结构-实操
  • 如何在服务器上运行一个github项目
  • Rsyslog介绍及运用
  • 面试150 二叉树中的最大路径和
  • 26-计组-多处理器
  • K8S的平台核心架构思想[面向抽象编程]
  • 自动驾驶数据仓库:时间片合并算法。
  • ether.js—6—contractFactory以部署ERC20代币标准为例子
  • 0201-solidity基础-区块链-web3
  • OneCode 3.0 VFS客户端驱动(SDK)技术解析:从架构到实战
  • 虚拟货币交易:游走在合法与犯罪的生死线
  • 排序树与无序树:数据结构中的有序性探秘
  • 【【异世界历险之数据结构世界(二叉树)】】
  • 交换类排序的C语言实现
  • 删除当前项目关联的远程仓库(remote)
  • C#结构体:值类型的设计艺术与实战指南
  • 基于ASP.NET+SQL Server实现(Web)排球赛事网站
  • iOS高级开发工程师面试——RunTime
  • JAVA面试宝典 - 《MyBatis 进阶:插件开发与二级缓存》
  • 多尺度频率辅助类 Mamba 线性注意力模块(MFM),融合频域和空域特征,提升多尺度、复杂场景下的目标检测能力
  • 华曦达港股IPO丨AI Home生态构建,开启智能家居新篇章
  • 《Librosa :一个专为音频信号处理和音乐分析设计的Python库》
  • ServBay Windows 1.3.0 更新!新增系统监控与 Nginx 配置升级
  • [spring6: Resource ResourceLoader]-加载资源
  • GPT-4和Claude哪个好
  • UML建模和设计模式——常考点整理
  • VScode链接服务器一直卡在下载vscode服务器,无法连接成功