前后端异步交互-Ajax

在前后端分离的应用中，前端与后端的交互通常采用异步方式进行。Ajax（Asynchronous JavaScript and XML）是实现这种交互的一种常见技术。以下是使用Ajax进行前后端异步交互的示例代码：

前端JavaScript代码（使用jQuery库）:

$.ajax({
    url: '/api/data', // 后端接口地址
    type: 'GET', // 请求方法，可以是GET、POST等
    dataType: 'json', // 期望从服务器返回的数据类型
    success: function(response) {
        // 请求成功时的回调函数
        console.log('Data received:', response);
    },
    error: function(xhr, status, error) {
        // 请求失败时的回调函数
        console.error('An error occurred:', error);
    }
});

后端Python代码（使用Flask框架）:

from flask import Flask, jsonify
 
app = Flask(__name__)
 
@app.route('/api/data')
def data():
    response_data = {'key': 'value'} # 假设的数据
    return jsonify(response_data)
 
if __name__ == '__main__':
    app.run()

在这个例子中，前端使用jQuery的$.ajax函数向后端的/api/data接口发送异步请求，并在请求成功时处理返回的数据。后端的Flask应用定义了一个路由/api/data，当接收到Ajax请求时，返回JSON格式的响应数据。