Ajax axios——前后端数据交互

Ajax和axios都是常用的前端技术，用于与后端进行数据交互。

1. 使用Ajax发送GET请求：

$.ajax({
    url: 'https://api.example.com/data',  // 后端API接口URL
    type: 'GET',                          // 请求方法
    dataType: 'json',                     // 预期服务器返回的数据类型
    success: function(response) {         // 请求成功后的回调函数
        console.log(response);
        // 处理返回的数据
    },
    error: function(xhr, status, error) { // 请求失败后的回调函数
        console.error(error);
        // 处理错误
    }
});

2. 使用Ajax发送POST请求：

$.ajax({
    url: 'https://api.example.com/data',  // 后端API接口URL
    type: 'POST',                         // 请求方法
    contentType: 'application/json',      // 发送信息至服务器时内容编码类型
    data: JSON.stringify({ key: 'value' }), // 将对象转换为JSON字符串作为发送数据
    dataType: 'json',                     // 预期服务器返回的数据类型
    success: function(response) {         // 请求成功后的回调函数
        console.log(response);
        // 处理返回的数据
    },
    error: function(xhr, status, error) { // 请求失败后的回调函数
        console.error(error);
        // 处理错误
    }
});

3. 使用axios发送GET请求：

axios.get('https://api.example.com/data')
    .then(function (response) {
        // 处理返回的数据
        console.log(response.data);
    })
    .catch(function (error) {
        // 处理错误
        console.error(error);
    });

4. 使用axios发送POST请求：

axios.post('https://api.example.com/data', { key: 'value' })
    .then(function (response) {
        // 处理返回的数据
        console.log(response.data);
    })
    .catch(function (error) {
        // 处理错误
        console.error(error);
    });

axios和Ajax都是非阻塞的HTTP请求方法，都可以用来向服务器发送请求并处理响应。axios相对于原生的Ajax来说，更加现代和简洁，它是基于Promise的，使得异步处理请求和响应变得更加简单。同时，axios支持浏览器和node.js，是一个更加通用的Ajax请求库。