前端HTTP發(fā)POST請求攜帶參數(shù)與后端接口接收參數(shù)的實現(xià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)文章希望大家以后多多支持腳本之家!
參考
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)文章
js獲取網(wǎng)頁可見區(qū)域、正文以及屏幕分辨率的高度
這篇文章主要介紹了js獲取網(wǎng)頁的各種高度,例如可見區(qū)域、正文以及屏幕分辨率的高度,需要的朋友可以參考下2014-05-05javascript 延遲加載技術(shù)(lazyload)簡單實現(xiàn)
延遲加載技術(shù)(簡稱lazyload)并不是新技術(shù), 它是js程序員對網(wǎng)頁性能優(yōu)化的一種方案.2011-01-01