今天把后端接口部署到服务器之后，就开发自己的项目了，不过在调用服务器的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)
})
今天就先分享到这里了，希望对大家有所帮助
文章为作者独立观点，不代表股票交易接口观点
股民评论