基于springboot與axios的整合問題
springboot與axios的整合
使用axios的時(shí)候一定要引用它的js包(可用npm命令:npm install axios)
1.get請求
// 為給定 ID 的 user 創(chuàng)建請求 axios.get('/demo/name') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); });
response用于接收后端的數(shù)據(jù),而response.data正好對應(yīng)后端傳入的 hello
后端接收
@RequestMapping(value = "/name",method = RequestMethod.GET) @ResponseBody public String Testname(){ return "hello"; }
2.post請求
這是一段前端發(fā)送請求代碼,利用axios發(fā)送post請求
<button type="button" onclick="openUrl()">testaxios</button> <script> function openUrl(){ axios({ method: 'post', url: '/demo/user', data: { ID: 'Fred', lastName: 'Flintstone' } }); } </script>
通過chrome瀏覽器解析,往后端傳遞的數(shù)據(jù)類型為Request Payload。
如何想接收這段數(shù)據(jù),就需要用到@RequestBody注解
@RequestMapping(value = "/user",method = RequestMethod.POST) @ResponseBody public void Test(@RequestBody HashMap<String,String> map){ System.out.println(map.get("ID")); }
這種寫法,你就可以通過健值對的形式獲取了
springboot與axios遇到的坑
spring boot
@RequestParam
適用于content-type不等于application/json的post請求,post請求需要用qs.stringify()序列化數(shù)據(jù)
適用于get請求(好像只能傳基本類型)
@RequestBody
適用于content-type等于application/json的post請求
axios
get
axios.get( '/api', { params: { //必須要這么寫 })
post
axios.post( '/api', {}或者params//參數(shù)名隨意)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Mybatis order by 動(dòng)態(tài)傳參出現(xiàn)的問題及解決方法
今天,我正在愉快地CRUD,突然發(fā)現(xiàn)出現(xiàn)一個(gè)Bug,我們來看看是怎么回事吧!接下來通過本文給大家介紹Mybatis order by 動(dòng)態(tài)傳參出現(xiàn)的一個(gè)小bug,需要的朋友可以參考下2021-07-07RocketMQ消息生產(chǎn)者是如何選擇Broker示例詳解
這篇文章主要為大家介紹了RocketMQ消息生產(chǎn)者是如何選擇Broker示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11Java數(shù)組隊(duì)列及環(huán)形數(shù)組隊(duì)列超詳細(xì)講解
隊(duì)列是一個(gè)有序列表,可以用數(shù)組和鏈表來實(shí)現(xiàn),隊(duì)列有一個(gè)原則。即:先存入隊(duì)列的數(shù)據(jù)要先取出,后存入的要后取出,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09手動(dòng)添加jar包進(jìn)Maven本地庫內(nèi)的方法
這篇文章主要介紹了手動(dòng)添加jar包進(jìn)Maven本地庫內(nèi)的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08java servlet結(jié)合mysql搭建java web開發(fā)環(huán)境
之前寫過一篇 servlet+oracle的文章,但是那是因?yàn)楣居锌赡芙幽敲匆粋€(gè)項(xiàng)目,然后我當(dāng)時(shí)也比較閑,所以隨便學(xué)了下,那玩意是白去研究了,因?yàn)楣竞竺娌]接到那項(xiàng)目。2015-12-12