axios的使用非常简单:
第一步,引入 axios 的 js 文件
<script src="js/axios-0.18.0.js">script>
第二部,使用axios 发送请求,并获取响应结果
发送 get 请求
axios({
method:"get",
url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
alert(resp.data);
})
发送 post 请求
axios({
method:"post",
url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
data:"username=zhangsan"
}).then(function (resp){
alert(resp.data);
});
axios()
是用来发送异步请求的,小括号中使用 js 对象传递请求相关的参数:
method
属性设置请求方式,取值为GET,POST等;
url
属性用于设置请求资源路径,注意如果是GET请求需要把请求参数拼接在请求路径的后面
data
属性用于设置请求参数,请求方式为post,可以使用此属性设置参数
then()
需要传递一个匿名函数。我们将 then()
中传递的匿名函数称为 回调函数,意思是该匿名函数在发送请求时不会被调用,而是在成功响应后调用的函数。而该回调函数中的 resp
参数是对响应的数据进行封装的对象,通过 resp.data
可以获取到响应的数据。
掌握了以上的axios知识通过一个小案例来巩固一下:
需求:
使用post方式向服务器发送tomcat请求,要求携带参数username=“zhangsan”,并将请求参数通过servlet在控制台上打印出来,还有将请求参数通过服务器响应给客户端
前端实现
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="js/axios-0.18.0.js">script>
head>
<body>
<script>
axios({
method:"post",
url:"http://localhost:8080/ajax-axios-demo/axiosDemoServlet",
data:"username=zhangsan"
}).then(function(resp){
alert(resp.data);
});
script>
body>
html>
后端实现
@WebServlet("/axiosDemoServlet")
public class AxiosDemoServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取请求参数
String username = request.getParameter("username");
System.out.println("获取请求参数:"+username);
response.getWriter().write("username="+username);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
在浏览器输入:
http://localhost:8080/ajax-axios-demo/demo1.html
查看响应结果:
看控制台输出:
至此axios的使用我们已经介绍完了,拜拜