axios简介
axios是一个取代我们常用的jQuery中ajax模块的一个框架。可以说功能跟ajax类似。本篇文章就是使用axios完成get和post的请求。axios代码风格采用链式结构。
GET请求
axios.get("http://localhost:8081/qunar/query?id=1")
.then(function (value) {
//正常成功回调函数
alert(value.data);
})
.catch(function (reason) {
//异常回调函数
alert(reason);
});
说明:then是请求成功的回调函数。catch是请求异常的捕获函数。
POST请求
//POST主要是参数写法不一样
axios.post("http://localhost:8081/qunar/query",{id:1})
.then(function (value) {
//正常成功回调函数
alert(value.data);
})
.catch(function (reason) {
//异常回调函数
alert(reason);
});
POST相比GET就是参数写作方式不一样。
后台SpringBoot的代码
主要是Controller层代码
package com.qianfeng.demo_boot_spring.controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@CrossOrigin
public class AxiosController {
@RequestMapping("query")
public String queryString(Integer id){
return "后台数据:"+id;
}
}
说明:@CrossOrigin是解决跨域问题。没有此注解,axios访问会出现Network Error异常。