SpringBoot專案的html頁面使用axios進行get post請求

刘大猫26發表於2024-11-05
Spring BootHTMLiOS

說明：本專案為SpringBoot專案而不是vue專案，本專案用於練習axios使用get及post請求
get和post請求都採用兩種方式進行配置，並註明易錯點

@

目錄
  • 1.axios是什麼
  • 2.vue專案為什麼使用axios，而不使用jquery？
  • 3.SpringBoot專案的html頁面引入axios方式，採用script引入
  • 4.官網為方便起見，為所有支援的請求方法提供了別名
  • 5.get請求的兩種方式
  • 6.post請求的兩種方式
  • 本人相關其他文章連結

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請求

相關文章