欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

前端HTTP發(fā)POST請求攜帶參數(shù)與后端接口接收參數(shù)的實現(xiàn)

 更新時間:2022年10月20日 10:11:06   作者:明天會更好new  
近期在學習的時候,碰到一個關(guān)于post的小問題,故拿出來分享一下,下面這篇文章主要給大家介紹了關(guān)于前端HTTP發(fā)POST請求攜帶參數(shù)與后端接口接收參數(shù)的相關(guān)資料,需要的朋友可以參考下

HTTP的GET請求與POST請求

HTTP請求方式有GET、POST、PUT、DELETE等八種,最常見的就是GET、POST,下面說一下GET請求,很簡單。

GET是按照規(guī)定參數(shù)只能寫在URL里面(雖然可以有請求體但是不符合規(guī)定),沒有請求體也就是data,那傳就非常簡單了,前端就是字符串拼接,后端如果是RESTful風格就占位符+@PathValue,傳統(tǒng)方式就直接寫就行了,當然參數(shù)就需要比較簡單自定義對象當然是不行的,list參數(shù)也是非常不方便,GET請求就是做查詢用,其他的不要用。其他的用什么,如果是RESTful風格規(guī)定的非常嚴的話是POST、PUT、DELETE換著用,但是規(guī)定不嚴的話POST搞定。

使用POST就可以把數(shù)據(jù)放到請求體data里面可以傳復雜對象、list等,但是這就有麻煩了,這里直接說前后端分離的SpringBoot(用的是SpringMVC)項目(SSM項目也一樣),復雜的是傳過來的數(shù)據(jù)類型多樣,這里的類型不是Integer、String這種,是Content—Type,有JSON型有表單性有文件型,那什么時候用什么樣的方式,前端如何發(fā)請求,后端如何收參數(shù),這里系統(tǒng)的總結(jié)一下,看下面。

常見HTTP內(nèi)容類型Content-Type

  • application/json:JSON數(shù)據(jù)格式
  • multipart/form-data:需要在表單中進行文件上傳時,就需要使用該格式
  • application/x-www-form-urlencoded:表單中默認的encType,表單數(shù)據(jù)被編碼為key/value格式發(fā)送到服務器

后端收參方式-前端對應傳參方式

廢話不多說直接上代碼

application/json

一個參數(shù)(基本數(shù)據(jù)類型的包裝類型),

這里注意必須加@RequestBody不然接收不到

@PostMapping(value="methodName",consumes = "application/json")
public CommonResult methodName(@RequestBody Integer id)

前端對應傳參方式(以axios傳參為例,下同)

let id=1;
axios.post("url",id)

多個參數(shù)(基本數(shù)據(jù)類型的包裝類型)

錯誤寫法

@PostMapping(value="methodName",consumes = "application/json")
public CommonResult methodName(@RequestBody Integer id,Integer name);
//或
public CommonResult methodName(@RequestBody Integer id,@RequestBody Integer name);

@RequestBody只能加在一個參數(shù)前面。

正確方式

@PostMapping(value="methodName",consumes = "application/json")
public CommonResult methodName(@RequestBody HashMap<Sting,Object> s);
//或 user:{id,name}
public CommonResult methodName(@RequestBody User user);

前端傳參方式,只寫data部分了

{
   userId: 0,//"userId":0
   username: "string"http://"username":"sdsa"
}
//或者
let user={}
user.id=1//let user={user:1}
data:user

就ok了

multipart/form-data

文件或表單,為什么要用這個呢,因為有一個超好用的東西FormData!

就上面的多個參數(shù)問題,后端就是不想封裝怎么辦

后端

@PostMapping(value="methodName",consumes = "multipart/form-data")
public CommonResult methodName(Integer id,Integer name);
//用formdata就別加@RequestBody了,@RequestBody是為json服務的

前端

	  let data=new FormData();
      data.append("id",1)
      data.append("name",2)//前面的key記得對應!
      this.$http({
        url: "http://localhost:8084/test/oneParam",
        method: "POST",
        data: data, 
        //headers: { 使用FormData可以不寫這個,F(xiàn)ormData會自動添加
        //  "Content-Type": "multipart/form-data",
        //},
})

multipart/form-data 主要還是傳文件但是如果想省事用它傳數(shù)據(jù)也挺好,如果后端參數(shù)是一個自定義對象

public CommonResult methodName(User user);

前端FormData就是key是user對象的屬性,因為SpringMVC會幫我們把對象解析成一個個屬性

但是主要一點?。?!微信小程序里面 不支持new FormData !?。?/p>

application/x-www-form-urlencoded

使用這種方式發(fā)數(shù)據(jù)需要數(shù)據(jù)像真的表單一樣,需要提交一個字符串比如

data: 'userId=1&name=dsadsa',

就和寫在url里面一樣,可以看出不好使,要想用最好使用qs庫。

參考這篇: application/x-www-form-urlencoded方式post傳值其實分兩種一種json一種字符串。

不好用但是在小程序開發(fā)里面不得不用,上面說了小程序不支持new FormData,要發(fā)application/x-www-form-urlencoded形式的,要怎么發(fā)呢,比如后端需要一個user對象,那么

let user={};
user.id=1
wx.request({
    .....
    data:user
})

就這樣,后端什么都不加。

總結(jié)

后端標明并限制content-type是@PostMapping(value=“methodName”,consumes = “multipart/form-data”),consumes,基本就這樣,然后@RequestParam看這個:POST、GET、@RequestBody和@RequestParam區(qū)別,以后再出bug就不用滿世界查了,簡簡單單。

然后說一下為哈兩周沒有發(fā)文章,雖然也沒人看哈哈,做課設去了,沒錯,然后現(xiàn)在終于放暑假了,休息了兩天,不能再放縱了,希望能在8.1號之前準備好面試題,因為字節(jié)提前批8.1號截止,后面就是正式批了。

到此這篇關(guān)于前端HTTP發(fā)POST請求攜帶參數(shù)與后端接口接收參數(shù)的文章就介紹到這了,更多相關(guān)前端發(fā)POST請求后端收參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

參考

常見的Content-Type類型

application/x-www-form-urlencoded方式

POST、GET、@RequestBody和@RequestParam區(qū)別

https://www.cnblogs.com/ranyonsue/p/13674493.html

https://www.jianshu.com/p/451db33f33a1

相關(guān)文章

  • ES6中Promise的使用方法實例總結(jié)

    ES6中Promise的使用方法實例總結(jié)

    這篇文章主要介紹了ES6中Promise的使用方法,結(jié)合實例形式總結(jié)分析了Promise對象中的各種常用方法及基本使用技巧,需要的朋友可以參考下
    2020-02-02
  • js獲取網(wǎng)頁可見區(qū)域、正文以及屏幕分辨率的高度

    js獲取網(wǎng)頁可見區(qū)域、正文以及屏幕分辨率的高度

    這篇文章主要介紹了js獲取網(wǎng)頁的各種高度,例如可見區(qū)域、正文以及屏幕分辨率的高度,需要的朋友可以參考下
    2014-05-05
  • webpack解決css兼容性問題小結(jié)

    webpack解決css兼容性問題小結(jié)

    這篇文章主要介紹了webpack解決css兼容性問題小結(jié),本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2024-05-05
  • 跟我學習javascript的閉包

    跟我學習javascript的閉包

    跟我學習javascript的閉包,這篇文章的目的就是讓大家對javascript閉包有一個非常全面的了解,感興趣的小伙伴們可以參考一下。
    2015-11-11
  • javascript實現(xiàn)搶購倒計時程序

    javascript實現(xiàn)搶購倒計時程序

    這篇文章主要為大家詳細介紹了javascript實現(xiàn)搶購倒計時程序,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-08-08
  • javascript 延遲加載技術(shù)(lazyload)簡單實現(xiàn)

    javascript 延遲加載技術(shù)(lazyload)簡單實現(xiàn)

    延遲加載技術(shù)(簡稱lazyload)并不是新技術(shù), 它是js程序員對網(wǎng)頁性能優(yōu)化的一種方案.
    2011-01-01
  • 不要在cookie中使用特殊字符的原因分析

    不要在cookie中使用特殊字符的原因分析

    參數(shù)name需要遵循規(guī)范RFC2109,也就是說name參數(shù)只能包含字母或者數(shù)字,不能包含逗號、分號、空格及美元符號。cookie的name屬性設置之后不能被修改。
    2010-07-07
  • js圖片切換具體實現(xiàn)代碼

    js圖片切換具體實現(xiàn)代碼

    這篇文章主要為大家詳細介紹了js實現(xiàn)圖片切換代碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-10-10
  • Dom元素變換效果(工具函數(shù))

    Dom元素變換效果(工具函數(shù))

     做前端或者js程序員的同學應該都有感受,在日常工作中,用的最多的功能,一個是ajax與后臺的數(shù)據(jù)接口,另一個就是對Dom元素的style控制,來達到不同的變換效果。
    2010-10-10
  • 微信小程序view與scroll-view組件的使用介紹

    微信小程序view與scroll-view組件的使用介紹

    小程序中的組件也是由宿主環(huán)境提供的,開發(fā)者可以使用組件快速搭建出頁面結(jié)構(gòu),這篇文章主要介紹了微信小程序view與scroll-view組件的使用
    2022-10-10

最新評論