最传统的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)//返回来的数据
})
},
这样就完成前后端交换数据啦!