一分钟学会axios的使用（ajax）+避坑

一、axios的作用

1、简介

  axios其实是简化ajax的一种写法，本质和ajax一样。而ajax(Asynchronous JavaScript And XML)，其实就是 异步的javaScript和XML。

2、作用

  简单的一句话来说就是“在html中通过axios连接到数据库（后台）”。
  其最大的特征就是可以不跳转，即可访问后台。

二、axios使用方法

1、直接写法

  首先，我们要使用axios时，要先导入，如下方代码：

   <script src="axios-0.18.0.js"></script>

*支持文件百度网盘：
    链接：https://pan.baidu.com/s/1mS6S7vr0T9g0VjWrEXkhFg?pwd=njjx
    提取码：njjx
https://pan.baidu.com/s/1mS6S7vr0T9g0VjWrEXkhFg?pwd=njjx
  然后，我们后端的代码中，核心就是请求和响应；在请求中，有get请求方式和post请求方式，故axios访问后台服务器时，分为这两种情况：
   get：

  axios({
    method:"get",
      /!*此处记得是服务器地址*!/
    url:"http://localhost:8088/_06_Ajax_war_exploded/AxiosServlet?username=zhangkun"
  }).then(function (resp){  // resp可以获取到响应的值
      alert(resp.data);
  })

   post

    axios({
        method:"get",
        url:"http://localhost:8088/_06_Ajax_war_exploded/AxiosServlet?",
        data:"username=zhangkun"  /*与get不同之处：参数通过data传*/
    }).then(function (resp){
        alert(resp.data);
    })

2、变式

  get：

axios.get("http://localhost:8088/_06_Ajax_war_exploded/AxiosServlet?username=zhangkun")
        .then(function (){
            alert(resp.data);
        })

  post：

    axios.post("http://localhost:8088/_06_Ajax_war_exploded/AxiosServlet","username=zhangkun")
        .then(function (){
            alert(resp.data);  
        })