您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“Vue請求怎么傳遞參數(shù)”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
get請求沒有請求體,傳遞的參數(shù)是添加到url字符串的后面:url?name=value&name1=value1
。
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ù)
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請求有請求體,傳遞的參數(shù)既可以放在請求體中也可以放在url后面。
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 "傳參成功"; }
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叫做MIME(mediaType)類型,使用Content-Type來表示請求和響應(yīng)中的媒體類型信息。如果是請求頭,它用來告訴服務(wù)端如何處理請求的數(shù)據(jù),如果是響應(yīng)頭,它用來告訴客戶端(一般是瀏覽器)如何解析響應(yīng)的數(shù)據(jù)。
這是最常見的 POST 提交數(shù)據(jù)的方式。瀏覽器的原生 form 表單,如果不設(shè)置 enctype 屬性,那么就會以 application/x-www-form-urlencoded 方式提交數(shù)據(jù)。
請求參數(shù)以 key1=val1&key2=val2
的方式進行拼接,并放到請求實體里面,如果是中文或特殊字符等會自動進行URL轉(zhuǎn)碼。一般用于表單提交。
multipart/form-data 將表單的數(shù)據(jù)處理為一條消息,以標簽為單元,用分隔符 boundary分開。multipart/form-data 支持文件上傳的格式,一般需要上傳文件的表單則用該類型。
application/json 類型用來告訴服務(wù)端消息主體是序列化后的 JSON 字符串,其中一個好處就是JSON 格式支持比鍵值對復雜得多的結(jié)構(gòu)化數(shù)據(jù)。
前端人員不需要關(guān)心數(shù)據(jù)結(jié)構(gòu)的復雜度,只要是標準的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è)置的不準確會導致服務(wù)端解析不了,從而報錯415。
(2)服務(wù)端響應(yīng)的 Content-Type 最好也設(shè)置準確,亂設(shè)置某些情況下可能會有問題,比如導致文件無法下載,客戶端把 json 數(shù)據(jù)當成文本使用。
(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。
“Vue請求怎么傳遞參數(shù)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。