Ajax请求后端接口

前言

今天把后端接口部署到服务器之后，就开发自己的项目了，不过在调用服务器的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)
     })

今天就先分享到这里了，希望对大家有所帮助