写点什么

SpringBoot 项目的 html 页面使用 axios 进行 get post 请求

作者:刘大猫
  • 2025-05-31
    黑龙江
  • 本文字数:1657 字

    阅读完需:约 5 分钟

说明:本项目为 SpringBoot 项目而不是 vue 项目,本项目用于练习 axios 使用 get 及 post 请求 get 和 post 请求都采用两种方式进行配置,并注明易错点


@[toc]

1.axios 是什么

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,axios 是对 ajax 的一种封装,而 jquery 也是对 ajax 的一种封装。axios 的 github:https://github.com/axios/axios

2.vue 项目为什么使用 axios,而不使用 jquery?

axios 集成 vue 更好且占内存小,而如果只用 jquery 的 ajax 的话,毕竟几百 k,$表达式也不用情况下显得太笨重了,因此 vue 项目使用 axios 居多且集成的更好。

3.SpringBoot 项目的 html 页面引入 axios 方式,采用 script 引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
复制代码


至于网上说的方案,对 springboot 项目测试无效 import axios from ‘axios’;//安装方法 npm install axios//或 bower install axios

4.官网为方便起见,为所有支持的请求方法提供了别名

axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])
复制代码

5.get 请求的两种方式

使用方式 1(推荐) => axios.get();注意 1:headers 请求头设置位置不一样,axios.get()中 headers 存在于{}中,而 axios({})中 headers 当成一个 key,value 进行设置。注意 2:get 请求参数封装与 params 对象中。


axios.get("/getVue", {           params: {               name:"zhangsan"           },           headers: {               responseType: 'json'    //响应数据格式为"json"           }       }).then((res)=>{           myForm.formMess.name = res.data.info.name;           myForm.formMess.password = res.data.info.password;           alert("查询数据成功!")       }).catch(err => {           console.log(err);   //打印响应数据(错误信息)       });
复制代码


使用方式 2 => axios({})


axios({     method:"get",      url:"/getVue",      params:{          name:"zhangsan"      },      headers: {          responseType: 'json'    //响应数据格式为"json"      }  }).then((res)=>{      myForm.formMess.name = res.data.info.name;      myForm.formMess.password = res.data.info.password;      alert("查询数据成功!")  }).catch(err => {      console.log(err);    //打印响应数据(错误信息)  });
复制代码

6.post 请求的两种方式

使用方式 1(推荐) => axios.post();注意点 1:headers 请求头设置位置不一样,axios.post()中 headers 存在于第三个{}中,而 axios({})中 headers 当成一个 key,value 进行设置。注意点 2:axios.post()的第二个{}指代请求体中没有作为 key 的 data,而 axios({})中使用 data 作为请求体参数。


axios.post("/addVue", {    "name":this.formMess.name,    "password":this.formMess.password     },{         headers: {             responseType: 'json'         }     }).then((res)=>{         console.log(res);         alert("提交数据成功!")     }).catch(err => {         console.log(err);    //打印响应数据(错误信息)     });
复制代码


使用方式 2 => axios({})


axios({     method:"post",     url:"/addVue",     data:{         "name":this.formMess.name,         "password":this.formMess.password,     },     header:{         responseType: 'json'    //响应数据格式为"json"     } }).then((res)=>{     console.log(res);     alert("提交数据成功!") }).catch(err => {     console.log(err);   //打印响应数据(错误信息) });
复制代码

本人相关其他文章链接

1.JQuery选择器+DOM操作+事件+DOM与JQuery对象间的转化


2.个人练习前端技术使用Bootstrap、JQuery、thymeleaf


3.JavaScript入门及基础知识介绍


4.AJax(XHR+Get和Post+AJax的封装)


5.SpringBoot项目的html页面使用axios进行get post请求

用户头像

刘大猫

关注

还未添加个人签名 2022-08-23 加入

还未添加个人简介

评论

发布
暂无评论
SpringBoot项目的html页面使用axios进行get post请求_人工智能_刘大猫_InfoQ写作社区