Axios和Ajax的区别是什么_代码007(未授权)

本文介绍: axios是通过Pro m i s e 实现对ajax 技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax 技术实现了局部数据的刷新，a x ios 实现了对ajax的封装，a x ios有的ajax都有，ajax有的axios不一定有，2、ajax 技术实现了局部数据的刷新，而axios实现了对ajax的封装。.对数据进行过滤和操纵相关数据的场景。.普通的文本输入提示和自动完成的场景。.快速的用户与用户间的交流响应。.深层次的树的导航。.表单驱动的交互。

优点　

缺点：

5、Ajax适用场景

6、Ajax不适用场景

$.ajax({
   type: 'get',
   url: '/getuser/data',
   dataType: 'json',
   data: {
        firstName: '张',
        lastName: '三'
   },
   success: function (response) {
       console.log(response);
   },
   error: function (error) {
	   console.log(error);
   }
});

<script type="text/javascript">
    function login() {
        $.ajax({
            type: 'post',
            url: '/email/login',
            dataType: 'json',
            data: {
                'account': $('#account').val(),
                'password': $('#password').val()
            },
            success: function (data) {
                if (data.code == 1) {
                    alert("登录成功");
                    window.location.href = "http://localhost:8080/email/success";
                } else {
                    alert("密码错误，请重新输入！")
                    window.location.href = "http://localhost:8080/email/error"
                }
            }
        })
    }
</script>

<script type="text/javascript">
    function addFruit() {
        let name = $.trim($("#fname").val());
        let price = $.trim($("#fprice").val());
        let count = $.trim($("#fcount").val());
        $.post("http://localhost:8080/fruit/add",
            {name: name, price: price, count: count},
            function (data) {
                if (data.code == 1) {
                    alert(data.message);
                    window.location.href = "http://localhost:8080/fruit/index";
                }
                if (data.code == 0) {
                    alert(data.message);
                }
            });
    }

    function delFruit(id) {
        if (window.confirm("是否确认删除" + id + "?")) {
            $.post("http://localhost:8080/fruit/delete?id=" + id, {id: id},
                function (data) {
                    if (data.code == 1) {
                        alert(data.message);
                        window.location.href = "http://localhost:8080/fruit/index";
                    }
                    if (data.code == 0) {
                        alert(data.message);
                    }
                });
        }
    }
</script>

// 第一种写法:将参数直接写在url中
axios.get('/query?name=tom').then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});
// 第二种写法:将参数直接写在params中
axios.get('/query', {
    params: {
        name: 'tom'
    }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});
// 第三种写法:将参数直接写在params中
axios({
  method: 'get',
  url: '/query',
  params: {
    name: 'tom',
  }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

axios.post('/query', {
    name: 'tom',
    icon: 'img_path'
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

 axios({
        url: '/getUsers',
        method: 'post',
        responseType: 'json', // 默认的
        data: {
            age: 18,
            sex: '男',
        }
    }).then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    });

 axios({
        url: '/getUsers',
        method: 'post',
        responseType: 'json', // 默认的
        params: {
            age: 18,
            sex: '男',
        }
    }).then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    });