日常学习-axios发送get与post请求

最新推荐文章于 2025-10-27 21:32:37 发布

原创最新推荐文章于 2025-10-27 21:32:37 发布 · 4.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java

导入标签

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

get请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
<script>
    //1.get的有参请求，参数直接以问号连接的形式跟在url后面
     axios({
         method:"get",
         url:"http://localhost/ajaxServlet?username=zhangsan"
    
     }).then(function (resp) {
         alert(resp.data);
     })
    
    //1.get的有参请求，参数使用params属性传递
    axios({
         method:"get",
         url:"http://localhost/ajaxServlet"
    	params:{
            username="zhangsan"
        }
     }).then(function (resp) {
         alert(resp.data);
     })
  </script>

get的简写：

axios.get("http://localhost/ajaxServlet"，{params:{username:"1"}}).then(res=>{
    console.log(res)
})

get请求

因为axios使用post携带参数默认使用application/josn所以后台可能接受不到参数
解决：
1.不使用data使用params传递
2.使用data传递，在接受端的参数上加上@requestBody注解让其转化成java对象

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
<script>
    axios({
        method:"POST",
        url:"http://localhost/ajaxServlet",
        params:{
            username="zhangsan"
        }
    }).then(function (resp) {
        alert(resp.data);
    })
</script>

post简写

//使用params
axios.post("http://localhost/ajaxServlet","username:1&age=10").then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

//使用data
axios.post("http://localhost/ajaxServlet",{username:'zhangsan'}).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})