Vue之請求如何傳遞參數

Posted on by

一、get請求

get請求沒有請求體，傳遞的參數是添加到url字符串的後面：url?name=value&name1=value1。

1、直接拼接

axios({
	method: "get",
	url: "http://localhost:1111/01/zc?yhm=lhj&pwd=123",   //參數拼接在url後面
}).then(function(resp){
	console.log(resp.data)
	})

參數附在url後面

攜帶的參數

2、params屬性

params屬性是將參數添加到url的請求字符串中。

this.axios({
	method:'get',
    params:{
          yhm:"lhj",
          pwd:"123"
          },
    url:'http://localhost:1111/01/zc'
   }).then(function(resp){
          console.log(resp.data);
          that.mes=resp.data;
         })

後端接收代碼

@CrossOrigin(origins = "*",maxAge = 3600)
    @RequestMapping(value = "/zc")
    public String ajax(String yhm,String pwd){
        System.out.println(yhm);
        System.out.println(pwd);
        return "傳參成功";
        }

二、post請求

post請求有請求體，傳遞的參數既可以放在請求體中也可以放在url後面。

1、data屬性傳遞

data是添加到請求體（body）中，該方式傳遞的參數有兩種格式：

（1）application/json格式

  • 前端：該格式data用json字符串進行傳遞參數，數據格式是application/json。
 this.axios({
       method:'post',
       data:{
           name:"lhj",
           age:24
           },
       url:'http://localhost:1111/01/ajax'
      }).then(function(resp){
          console.log(resp.data);
       })

url後面沒有拼接參數

數據格式application/json

請求體數據為json字符串

  • 服務器端接收參數使用 @RequestBody 類名 對象名 或者@RequestBody Map<>map將前端傳來的json數據封裝到一個對象或Map中。
 	@CrossOrigin(origins = "http://localhost:8080",maxAge = 3600)
    @RequestMapping(value = "/ajax",method = RequestMethod.POST)
    public String zhuce(@RequestBody Map<String,Object> user){
        System.out.println(user.get("name"));
        System.out.println(user.get("age"));
        return "傳參成功";
    }

（2）application/x-www-form-urlencoded格式

  • 前端：該格式data用查詢字符串進行傳遞參數，即"name1 = value1&name2 = value2"的形式。

該形式data有兩種傳遞方式：

①直接傳遞字符串

data:"name=lhj&age=123",      //字符串形式

②使用qs.stringify()將json轉換成查詢字符串

data:qs.stringify({name:'lhj',age:24}),
  • 後端接收
	@CrossOrigin(origins = "http://localhost:8080",maxAge = 3600)
    @RequestMapping(value = "/ajax",method = RequestMethod.POST)
    public String zhuce(String name,int age){
        System.out.println(name);
        System.out.println(age);
        return "傳參成功";
    }

2、params屬性傳遞

post請求用該屬性傳遞參數跟get請求一樣，將參數拼接在url之後。

 this.axios({
       method:'post',
       params:{
           name:"lhj"
           },
       url:'http://localhost:1111/01/ajax'
      }).then(function(resp){
          console.log(resp.data);
       })

參數附在url後面

攜帶的參數

後端代碼

@CrossOrigin(origins = "http://localhost:8080",maxAge = 3600)
    @RequestMapping(value = "/ajax",method = RequestMethod.POST)
    public String zhuce(String name){
        System.out.println(name);
        return "傳參成功";
    }

三、常見的 Content-Type 類型

Content-Type叫做MIME（mediaType）類型，使用Content-Type來表示請求和響應中的媒體類型信息。如果是請求頭，它用來告訴服務端如何處理請求的數據，如果是響應頭，它用來告訴客戶端（一般是瀏覽器）如何解析響應的數據。

1、application/x-www-form-urlencoded

這是最常見的 POST 提交數據的方式。瀏覽器的原生 form 表單，如果不設置 enctype 屬性，那麼就會以 application/x-www-form-urlencoded 方式提交數據。

請求參數以 key1=val1&key2=val2 的方式進行拼接，並放到請求實體裡面，如果是中文或特殊字符等會自動進行URL轉碼。一般用於表單提交。

2、multipart/form-data

multipart/form-data 將表單的數據處理為一條消息，以標簽為單元，用分隔符 boundary分開。multipart/form-data 支持文件上傳的格式，一般需要上傳文件的表單則用該類型。

3、application/json

application/json 類型用來告訴服務端消息主體是序列化後的 JSON 字符串，其中一個好處就是JSON 格式支持比鍵值對復雜得多的結構化數據。

前端人員不需要關心數據結構的復雜度，隻要是標準的json格式就能提交成功。

由於 JSON 規范的流行，除瞭低版本 IE 之外的各大瀏覽器都原生支持JSON.stringify，服務端語言也都有處理 JSON 的函數，使用起來沒有困難。

使用技巧：

Accept 為客戶端希望接受的數據類型，Content-Type 為（客戶端或者服務端）發送的實體數據的數據類型，兩者是有區別的，如果服務端返回的類型和客戶端希望接受的數據類型不一致，從而報錯406。

（1）客戶端發送請求時的 Content-Type 設置如果設置的不準確會導致服務端解析不瞭，從而報錯415。

（2）服務端響應的 Content-Type 最好也設置準確，亂設置某些情況下可能會有問題，比如導致文件無法下載，客戶端把 json 數據當成文本使用。

（3）如果是一個 restful 接口（json格式），一般將 Content-Type 設置為 application/json；charset=UTF-8

（4）如果是文件上傳，一般 Content-Type 設置為 multipart/form-data

（5）如果普通表單提交，一般 Content-Type 設置為 application/x-www-form-urlencoded。

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：