成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

springBoot 與 axios 表單提交

Amos / 1337人閱讀

摘要：不用于表單提交。實驗測試失敗狀態(tài)碼請求成功，但是服務(wù)端沒有接受到數(shù)據(jù)。服務(wù)端當(dāng)然接受不到數(shù)據(jù)測試成功狀態(tài)碼使用對數(shù)據(jù)在提交前進(jìn)行了格式化，將其轉(zhuǎn)換成的形式，此時服務(wù)端成功接收到數(shù)據(jù)。服務(wù)端無法正確解析。

環(huán)境聲明
springBoot : 1.8
java : jdk1.8
IDE : IDEA

問題描述
axios 表單提交，springBoot 無法接受到數(shù)據(jù)，但使用swagger測試，可以。

原因
1、axios的表單提交 ，content-type 默認(rèn)為 application/json;charset=UTF-8
2、提交數(shù)據(jù)會附加在payload（以JSON形式）。
3、@ModelAttribute 可以接受表單的數(shù)據(jù)，但是content-type的類型需要為application/x-www-form。@RequestBody 可以接受表單數(shù)據(jù)，但是content-type類型需要為application/json。@RequestParam 從URL中接受請求參數(shù)。（不用于表單提交）。

實驗

測試1.1（失?。?/strong>

this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      category:this.category
    }
  });
 public Object inserCategory(@ModelAttribute Category category) {}

http 狀態(tài)碼：

請求成功，但是服務(wù)端沒有接受到數(shù)據(jù)。原因是@ModelAttribute需要接收FormData形式的數(shù)據(jù)

測試1.2（失?。?/strong>

this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      category:this.category
    },
    headers:{
      "Content-Type": "application/x-www-form-urlencoded"
    }
  });
public Object inserCategory(@ModelAttribute Category category) {}

http狀態(tài)碼：

Form Data 被默認(rèn)組裝成了 json的形式，雖然我們修改了Content-type。

測試1.3（失敗）

if(valid) {
  this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      name: this.category.name,
      desc: this.category.desc
    },
    headers:{
      "Content-Type": "application/x-www-form-urlencoded"
    }
  });
public Object inserCategory(@ModelAttribute Category category) {}

FormData 還是json的形式， 不是以FormData的形式。服務(wù)端當(dāng)然接受不到數(shù)據(jù)

測試1.4（成功）

if(valid) {
  this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      name: this.category.name,
      desc: this.category.desc
    },
    headers:{
      "Content-Type": "application/x-www-form-urlencoded"
    },
    transformRequest: [function (data) {
      return that.$qs.stringify(data);
    }],
  });
 public Object inserCategory(@ModelAttribute Category category) {}

http狀態(tài)碼：

使用qs對數(shù)據(jù)在提交前進(jìn)行了格式化，將其轉(zhuǎn)換成FormData的形式，此時服務(wù)端成功接收到數(shù)據(jù)。
也就是說，使用@ModelAttribute修飾，客戶端的content-type需要是 application/x-www-form-urlencoded 且 FormData數(shù)據(jù)是正確的FormData格式

測試@RequestBody：

測試2.1（失敗）

if(valid) {
  this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      name: this.category.name,
      desc: this.category.desc
    },
    headers:{
      "Content-Type": "application/x-www-form-urlencoded"
    },
    transformRequest: [function (data) {
      return that.$qs.stringify(data);
    }],
  });
 public Object inserCategory(@RequestBody Category category) {}

也就是說@RequstBody 只能支持以JSON數(shù)據(jù)格式上傳。

測試2.2（失敗）

this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      category:this.category
    }
  })
public Object inserCategory(@RequestBody Category category) {}

以這種形式提交數(shù)據(jù)會失敗，因為category在最外面又包裝了一個對象。服務(wù)端無法正確解析。

測試2.3（成功）

this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      name: this.category.name,
      desc: this.category.desc
    },
   });
public Object inserCategory(@RequestBody Category category) {}

以JSON的形式，將數(shù)據(jù)上傳，服務(wù)端成功接受到數(shù)據(jù)

總結(jié)：@RequestBody 只能以json數(shù)據(jù)提交，數(shù)據(jù)會負(fù)載在Request Payload中；@ModelAttribute 可以以表單數(shù)據(jù)提交，數(shù)據(jù)需要以FormData形式提交。

下面是我推薦的寫法

this.$axios.post(this.$rootPath+"/category/category",this.$qs.stringify(this.category))
public Object inserCategory(@ModelAttribute Category category) {}

注意：qs 默認(rèn)會把 content-type 修改為 application/x-www-form-urlencoed。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/68498.html

相關(guān)文章

  • SpringBoot非官方教程 | 第二十篇： 處理表單提交

    摘要：創(chuàng)建工程涉及了，加上和的起步依賴。創(chuàng)建實體代碼清單如下創(chuàng)建頁面展示層啟動工程，訪問點擊參考資料源碼下載 這篇文件主要介紹通過springboot 去創(chuàng)建和提交一個表單。 創(chuàng)建工程 涉及了 web，加上spring-boot-starter-web和spring-boot-starter-thymeleaf的起步依賴。 org.springf...

    impig33 評論0 收藏0

  • Element-ui實現(xiàn)合并多圖上傳（一次請求多張圖片）

    摘要：實現(xiàn)多圖上傳主要用到以下兩個屬性是自帶多圖上傳的，但是細(xì)心的朋友可能發(fā)現(xiàn)默認(rèn)多圖的實現(xiàn)可能和我們預(yù)期有些出入，有截圖可以看出，實質(zhì)是進(jìn)行多次請求在上傳事件觸發(fā)后，多圖上傳的默認(rèn)實現(xiàn)調(diào)用了三次請求。 前言 工作中碰到需要多圖上傳，在使用element-ui解決過程中碰到一些問題，在這里分享給大家。 環(huán)境： Springboot+Vue+Element-ui 正文 這次上傳使用的是Elem...

    loostudy 評論0 收藏0

  • 前后端聯(lián)調(diào)之Form Data與Request Payload，你真的了解嗎？

    摘要：前言做過前后端聯(lián)調(diào)的小伙伴，可能有時會遇到一些問題。它是請求中空行的后面那部分。這就是它向你展示的。值得形式是以的形式提交的。傳遞對象的時候，默認(rèn)為類型的值，與非時，的區(qū)別。如果是字符串的話，后端解析的內(nèi)容時候，肯定要去解析啦。 前言 做過前后端聯(lián)調(diào)的小伙伴，可能有時會遇到一些問題。例如，我明明傳遞數(shù)據(jù)給后端了，后端為什么說沒收到呢？這時候可能就會就會有小伙伴陷入迷茫，本文從chrom...

    Fundebug 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<