Ajax框架Axios的基本使用

Ajax框架Axios的基本使用

    • axios的基本使用
    • axios+servlet小案例

axios的基本使用

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知识通过一个小案例来巩固一下:

axios+servlet小案例

需求:
使用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
查看响应结果:
Ajax框架Axios的基本使用_第1张图片
看控制台输出:
在这里插入图片描述
至此axios的使用我们已经介绍完了,拜拜

你可能感兴趣的:(前后端交互技术,ajax,servlet,前端)