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

最新評論