文章目錄
文章由來
在學習Vue前後臺交互時,發現傳的參數是個json串,不是我想要的參數格式,下面是我後臺接受參數的代碼:
@ApiOperation("查詢Users用戶信息")
@RequestMapping(value = "/queryUsers", method = {RequestMethod.GET, RequestMethod.POST})
public RemoteResult queryUsers(String name, String time, String password) {
}
我需要的參數格式是Form Data格式 比如:(參數可以忽略 看格式就行)
由於傳參的格式不是我想要的,所以我就查閱了相關的文檔學習,並在此記錄這次的學習情況,僅供參考,不足之處請指出;
請求參數方式類型介紹
Query String Parameters
這個中類型,常見於Get請求,參數會以url string的形式進行傳遞.
我在Vue中使用 axios 來完成 ajax 請求
//query String Parameters傳參 後臺需要注意 java.lang.IllegalArgumentException異常(原因是[]{}無法解析,可參考本文其他博客)
this.axios({
method: "get",
url: "http://localhost:8088/lianxi/api/wzxlianxi/v1/queryUserss",
params: this.formInlines
});
可以在瀏覽器通過F12查看 參數格式如下圖:
由圖可見 參數是直接拼接在URL上的。即?後的字符串則爲其請求參數，並以&作爲分隔符.
Form Data
Form Data傳參格式,顧名思義就是常見的 Form表單;
此處qs.stringify() 將對象 序列化成URL的形式，以&進行拼接 下面會講到
//form data傳參
this.axios({
method: "post",
url: "http://localhost:8088/lianxi/api/wzxlianxi/v1/queryUserss",
data: qs.stringify(this.formInlines)
});
如下:
此處注意Content-Type ;當發起一次POST請求時，若未指定Content-Type，則默認Content-Type爲application/x-www-form-urlencoded。即參數會以Form Data的形式進行傳遞，不會顯式出現在請求url中。
Request Payload
request payload是vue默認的請求參數方式,也就是一個json串,後臺在接收的時候可以使用String 來接受這個json然後在轉成Map,
// request payload傳參可以使用Requestbody 接收
this.axios({
method: "post",
url:
"http://localhost:8088/lianxi/api/wzxlianxi/v1/queryUsersspayload",
data: this.formInlines
});
如圖:
這種傳參方式不會顯式出現在URL中,這裏需要注意的是Content-Type和Form Data的不一樣;
qs的使用介紹
qs是一個npm倉庫所管理的包,可通過npm install qs命令進行安裝;在使用時在.vue文件中引入: import qs from "qs";然後直接使用;
下面詳細介紹qs.parse() qs.stringify()的使用方法以及和Json.stringify() Json.parse() 的區別
qs.parse()
qs.parse()將URL解析成對象的形式
//qs的使用
let str = 'method=queryUser&name=admin&password=123456';
console.log(qs.parse(str));
打印結果:
qs.stringify()
qs.stringify()將對象 序列化成URL的形式，以&進行拼接
let obj = {
method: "queryUser",
name: "admin",
password: "123456",
time: "2020-02-02"
};
console.log(qs.stringify(obj));
打印結果:
qs.parse() qs.stringify()和JSON.stringify() JSON.parse()使用的的區別:
先看代碼:
let str = "method=queryUser&name=admin&password=123456";
let changeStr = qs.parse(str);
console.log(changeStr);
console.log(typeof changeStr);
let obj = {
method: "queryUser",
name: "admin",
password: "123456",
time: "2020-02-02"
};
let changeObj = qs.stringify(obj);
console.log(changeObj);
console.log(typeof changeObj);
let changeObj1 = JSON.stringify(obj);
console.log(changeObj1);
console.log(typeof changeObj1);
let changeObj2 = JSON.parse(changeObj1);
console.log(changeObj2);
console.log(typeof changeObj2);
打印結果如下圖:
JSON.stringify()的作用是將對象轉換成JSON字符串，而JSON.parse()是將JSON字符串轉換成一個對象。也就是說，如果我們用JSON.stringify()將一個對象變成了字符串，那麼使用JSON.parse()將字符串還原成對象。
由此可以得出:
- qs.parse() qs.stringify()通常是用來處理url
- JSON.stringify() JSON.parse()是處理json
Axios發送請求時params和data的區別
- params是添加到url的請求字符串中的，用於get請求
- data是添加到請求體（body）中的， 用於post請求