Axios和Ajax的区别是什么(详细介绍)

目录

• 一、Axios 和 Ajax 的区别
• 二、Axios 和 Ajax 的区别及优缺点
• Ajax：
• 1、什么是Ajax
• 2、Ajax的原理？
• 3、核心对象？
• 4、Ajax优缺点？
• 5、Ajax适用场景
• 6、Ajax不适用场景
• 7、代码
• 8、Ajax请求的五个步骤
• Axios：
• 1、Axios是什么
• 2、Axios有那些特性？
• 3、执行get请求，有两种方式
• 4、执行post请求，注意执行post请求的入参，不需要写在params字段中，这个地方要注意与get请求的第二种方式进行区别。
• 三、Axios和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);
    });