html如何向后台发送请求获取数据?Vue如何给后台发送请求获取数据?前后端如何传递数据?axios如何发送get请求?axios如何发送post请求?

最传统的JavaWeb都是通过JSP传递数据,显然这样不能做到前后端分离,于是引进了ajax方式,而axios就是对ajax的封装。


注意事项:

如果向SpringBoot发送请求出现http错误等问题可以从以下几个方面考虑:

1、传输POST请求时,参数名称与后台模型类内的属性名不同。

2、传递参数的数据类型与后台的模型类型不匹配,js是脚本语言,有时的数字1它可能给存成字符串1,而后台是Integer类型,就导致类型不匹配造成http错误。

3、需要给SpringBoot的Controller(web)层类加上一个注解,见我的另一篇文章


一、首先我们需要下载一个axios的js文件,

axios文件下载地址:

 https://pan.baidu.com/s/1seCfwBByh1P9nOCiSjVijQ?pwd=6cq7    提取码: 6cq7

下载完毕之后将其放到对应的目录里:

二、用js引用axios文件:

在html标签种用<script></script>标签引用刚刚导入的axios文件:

<!--导入发送请求的js代码-->
<script src="page/axios-0.18.0.js"></script>

三、发送请求:

发送方式主要有两种POST和GET:

1、POST请求:

            sendRequest(start, length) {
                axios({
                    method: "POST", //请求的方式
                    url: 'http://127.0.0.1:8080/study/vueElement/searchInfo', //请求的路径
                    data:this.data //携带的数据,如果没有可以将这行删除
                }).then(resp=> {
                    console.log(resp)//返回来的数据
                })
            },

2、GET请求:

  • 地址栏可以携带?参数
           sendRequest(start, length) {
                axios({
                    method: "GET", //请求的方式
                    url: 'http://127.0.0.1:8080/study/vueElement/getData?start='+this.start, //请求的路径
                }).then(resp=> {
                    console.log(resp)//返回来的数据
                })
            },

这样就完成前后端交换数据啦!

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值