如何实现网站前后端交互？

动态网站开发过程中，常常遇到前端与后端产生信息交互的场景，比如用户在登陆过程中在前端页面输入了账号和密码，需要前端将这些数据传输到后端，由后端程序调用数据库数据进行比对，比对完成后，后端程序再将比对结果传输回前端。上面提到的这个场景就好像是前端向后端问话，后端回答前端，因此我们可以形象地将其成为“问询”。

首先明确，我们希望能够采用“异步”的方式执行问询。换句话说，我们希望问询的过程不要阻塞其他的进程（这是很自然的想法，我问你一个问题，你还没回答我的时候，我当然应该可以去作别的事情，这样往往是高效率的）。

在计算机编程中，异步和同步是描述程序执行流程的两种不同方式：
同步（Synchronous） 指的是程序的执行顺序是按照代码的书写顺序依次进行的。在同步操作中，当前任务完成后才会执行下一个任务。如果一个任务需要等待某个操作完成（如读取文件、数据库操作等），程序会停下来等待，直到操作完成才继续执行。
异步（Asynchronous） 指的是程序在执行某个操作时，不需要等待该操作完成就可以继续执行后续的代码。异步操作通常由回调函数、事件、Promises 或其他机制来处理操作完成后的结果。这种方式允许程序在等待操作完成的同时继续执行其他任务。

虽然问询的过程非常简单，但我们还是以时序图的方式整理其运作流程：

sequenceDiagram
    actor 用户
    participant 前端程序
    participant 后端程序

    用户 ->> 前端程序:触发事件
    前端程序 ->> 后端程序:展开问询
    后端程序 -->> 前端程序:回复问询
    前端程序 -->> 用户:展示事件结果

不难发现，前端与后端势必各自需要某个方式（具体的而言，就是函数）进行响应，下面分别进行整理。

前端 fetch 函数

前端采用 JavaScript 语言。

fetch函数是 JavaScript 中用于发起网络请求的 API。我们可以在前端使用fetch函数实现展开问询与接收后端回复的功能。

target_url = '/api/data'; // 这里的 target_url 与下面后端中的 route 地址对应
info = 'key1=1&key2=2';
url = target_url + '?' + info;
// GET 方法传输格式为 /地址?传输量1=值1&传输量2=值2
fetch(url)
  .then(response => response.json()) // 解析 JSON 响应体
  .then(data => {
    // 使用数据
  })
  .catch(error => {
    // 处理错误
  });

后端 request

后端采用 python 语言，并利用 flask 框架实现。

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/data', methods=['GET'])
def receive_data():
    # 获取查询参数，request.args 是一个 ImmutableMultiDict 类型
    key1 = request.args.get('key1', default=None, type=str)
    key2 = request.args.get('key2', default=None, type=str)
    
    # 使用获取的参数进行业务逻辑处理
    # ...

    # 构造响应数据
    response_data = {
        'message': 'Data received successfully',
        'key1': key1,
        'key2': key2,
    }
    
    # 返回 JSON 响应和 200 OK 状态码
    return jsonify(response_data), 200

if __name__ == '__main__':
    app.run(debug=True)