前言
今天把后端接口部署到服务器之后,就开发自己的项目了,不过在调用服务器的API的时候,跟本地接口还是有点区别的,弄了蛮久,就想写篇博客分享一下
功能简述
本地调用服务器的接口,获取到Json数据,打印在控制台上。
具体实现
话不多说,直接上代码
$.ajax({
#这里填写你在服务器上面的IP/域名
url:"http://www.xxx.xxx:xxxx/api/findActivity",
#请求方式
method: "post",
#请求参数的格式
data: JSON.stringify(data),
#内容结构
contentType: "application/json;charset=UTF-8",
#请求数的类型
dataType: "json",
#返回值
success: function (data) {
if (data) {
console.log(data)
}
},
error: function () {
}
主要要注意 url:“http://www.xxx.xxx:xxxx/api/findActivity”, 这里一开始我是没有填写http://,结果报了一个跨域问题。
一开始我以为是我后端跨域问题没有处理好,不过我用postman输入API和直接在浏览器钟输入API都可以获取返回值,所以我才能了我的小伙伴,最后找到了原因,最后成功获取值
Vue中调用接口
我再开发Java之前的一段时间,有从事过前端开发,现在开发整体项目的时候,前端一般使用Vue进行开发,而今天分享一下Vue调用接口的语法
下面是Vue调用POST接口
axios({
url:"http://www.xxx.xxx:xxxx/api/teacherLogin",
method: "post",
data: JSON.stringify(this.data),
headers: {
'Content-Type':"application/json;charset=UTF-8"
},
dataType: "json",
})
//请求成功
.then(response=>{
//这里做逻辑处理
})
//请求失败的时候 进行报错 在控制台上面输出错误信息
.catch(error=>{
console.log(error)
})
对比上面再普通的HTML中进行接口的调用,再Vue中的Content-Type中要放在headers中,这个是Vue的语法。其他的与一般是一样的
下面是Vue中调用get接口
axios({
url:"http://www.xxx.xxx:xxxx/api/getActivity",
method:"get",
})
//请求成功
.then(response=>{
//这里做逻辑处理
})
//请求失败的时候 进行报错 在控制台上面输出错误信息
.catch(error=>{
console.log(error)
})
今天就先分享到这里了,希望对大家有所帮助