前后端数据交互——ajax

在前后端分离的开发模式下，前端与后端的数据交互通常采用AJAX（Asynchronous JavaScript and XML）技术。以下是使用jQuery框架中的$.ajax方法进行数据交互的示例代码：

// 假设我们要向服务器发送一个GET请求来获取数据
$.ajax({
    url: 'http://example.com/api/data', // 后端API接口URL
    type: 'GET', // 请求类型，这里是GET
    dataType: 'json', // 预期服务器返回的数据类型
    success: function(response) {
        // 请求成功时的回调函数
        console.log('数据获取成功:', response);
        // 这里可以处理获取到的数据，例如更新页面内容等
    },
    error: function(xhr, status, error) {
        // 请求失败时的回调函数
        console.error('数据获取失败:', error);
    }
});
 
// 假设我们要向服务器发送一个POST请求来提交数据
$.ajax({
    url: 'http://example.com/api/data', // 后端API接口URL
    type: 'POST', // 请求类型，这里是POST
    contentType: 'application/json', // 发送信息至服务器时内容编码类型
    data: JSON.stringify({ key: 'value' }), // 将对象转换为JSON字符串作为请求体发送
    processData: false, // 不要对data进行处理，因为数据已经是字符串
    success: function(response) {
        // 请求成功时的回调函数
        console.log('数据提交成功:', response);
    },
    error: function(xhr, status, error) {
        // 请求失败时的回调函数
        console.error('数据提交失败:', error);
    }
});

在这个示例中，我们展示了如何使用$.ajax进行GET和POST请求。在实际应用中，你需要根据后端API的具体要求来调整url、type、data等参数。此外，根据项目需求，你可能还需要添加例如headers、timeout等额外的配置项。