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

原创

刘大猫

发布于 2024-11-05 22:59:26

720

发布于 2024-11-05 22:59:26

文章被收录于专栏：Spring及SpringBoot相关

说明：本项目为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);   //打印响应数据(错误信息)
 });