一、get請求

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

1、直接拼接

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

參數(shù)附在url后面

攜帶的參數(shù)

2、params屬性

params屬性是將參數(shù)添加到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請求有請求體，傳遞的參數(shù)既可以放在請求體中也可以放在url后面。

1、data屬性傳遞

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

（1）application/json格式

• 前端：該格式data用json字符串進行傳遞參數(shù)，數(shù)據(jù)格式是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后面沒有拼接參數(shù)

數(shù)據(jù)格式application/json

請求體數(shù)據(jù)為json字符串

• 服務(wù)器端接收參數(shù)使用 @RequestBody 類名 對象名 或者@RequestBody Map<>map將前端傳來的json數(shù)據(jù)封裝到一個對象或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用查詢字符串進行傳遞參數(shù)，即"name1 = value1&name2 = value2"的形式。

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

①直接傳遞字符串

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

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

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請求用該屬性傳遞參數(shù)跟get請求一樣，將參數(shù)拼接在url之后。

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

參數(shù)附在url后面

攜帶的參數(shù)

后端代碼

@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來表示請求和響應(yīng)中的媒體類型信息。如果是請求頭，它用來告訴服務(wù)端如何處理請求的數(shù)據(jù)，如果是響應(yīng)頭，它用來告訴客戶端（一般是瀏覽器）如何解析響應(yīng)的數(shù)據(jù)。

1、application/x-www-form-urlencoded

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

請求參數(shù)以 key1=val1&key2=val2 的方式進行拼接，并放到請求實體里面，如果是中文或特殊字符等會自動進行URL轉(zhuǎn)碼。一般用于表單提交。

2、multipart/form-data

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

3、application/json

application/json 類型用來告訴服務(wù)端消息主體是序列化后的 JSON 字符串，其中一個好處就是JSON 格式支持比鍵值對復(fù)雜得多的結(jié)構(gòu)化數(shù)據(jù)。

前端人員不需要關(guān)心數(shù)據(jù)結(jié)構(gòu)的復(fù)雜度，只要是標(biāo)準(zhǔn)的json格式就能提交成功。

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

使用技巧：

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

（1）客戶端發(fā)送請求時的 Content-Type 設(shè)置如果設(shè)置的不準(zhǔn)確會導(dǎo)致服務(wù)端解析不了，從而報錯415。

（2）服務(wù)端響應(yīng)的 Content-Type 最好也設(shè)置準(zhǔn)確，亂設(shè)置某些情況下可能會有問題，比如導(dǎo)致文件無法下載，客戶端把 json 數(shù)據(jù)當(dāng)成文本使用。

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

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

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

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論