要实现您描述的功能，可以使用 Ajax 将按钮的值发送到 Flask 后端，而不重新加载页面。以下是完整的解决方案：

修改 HTML 按钮

为每个按钮添加一个 class（例如 ajax-button），以便通过 jQuery 轻松选择它们。这样，您可以使用通用事件处理程序来捕获所有按钮的点击事件。

<div id="d_line1">
    <button type="button" class="ajax-button" id="bul" value="UL">UL</button>
    <button type="button" class="ajax-button" id="bu" value="U">ʌ</button>
    <button type="button" class="ajax-button" id="bur" value="UR">UR</button>
</div>
<div id="d_line2">
    <button type="button" class="ajax-button" id="bl" value="L"><</button>
    <button type="button" class="ajax-button" id="br" value="R">></button>
</div>
<div id="d_line3">
    <button type="button" class="ajax-button" id="bdl" value="DL">DL</button>
    <button type="button" class="ajax-button" id="bd" value="D">v</button>
    <button type="button" class="ajax-button" id="bdr" value="DR">DR</button>
</div>

• 将 type="submit" 改为 type="button"，防止默认的表单提交行为。
• 使用 class="ajax-button" 为按钮分类，方便使用通用的 JavaScript 处理逻辑。

前端：Ajax 脚本

使用 jQuery 捕获按钮点击事件，并发送其值到 Flask 后端。

$(document).ready(function() {
    $(".ajax-button").click(function(e) {
        e.preventDefault(); // 防止页面刷新
        const buttonValue = $(this).val(); // 获取按钮的值
        $.ajax({
            type: "POST",
            url: "/interface_novapro.html",
            data: JSON.stringify({ buttonValue: buttonValue }), // 将数据序列化为 JSON
            contentType: "application/json",
            success: function(response) {
                alert(response.message); // 使用后端返回的消息
            },
            error: function(error) {
                alert("An error occurred: " + error.responseText);
            }
        });
    });
});

后端：Flask 端点

Flask 需要支持接收 JSON 格式的数据。

from flask import Flask, request, jsonify, render_template

app = Flask(__name__)

@app.route('/', methods=["GET", "POST"])
@app.route('/interface_novapro.html', methods=["GET", "POST"])
def pilotageTour():
    if request.method == "POST":
        # 从 AJAX 请求中获取按钮值
        data = request.get_json()
        button_value = data.get("buttonValue")

        # 根据按钮值执行相应的逻辑
        if button_value == 'UL':
            print("Bouton Up Left reconnu")
            return jsonify({"message": "Bouton Up Left reconnu"})
        elif button_value == 'U':
            print("Bouton Up reconnu")
            return jsonify({"message": "Bouton Up reconnu"})
        elif button_value == 'UR':
            print("Bouton Up Right reconnu")
            return jsonify({"message": "Bouton Up Right reconnu"})
        elif button_value == 'L':
            print("Bouton Left reconnu")
            return jsonify({"message": "Bouton Left reconnu"})
        elif button_value == 'R':
            print("Bouton Right reconnu")
            return jsonify({"message": "Bouton Right reconnu"})
        elif button_value == 'DR':
            print("Bouton Down Right reconnu")
            return jsonify({"message": "Bouton Down Right reconnu"})
        elif button_value == 'D':
            print("Bouton Down reconnu")
            return jsonify({"message": "Bouton Down reconnu"})
        elif button_value == 'DL':
            print("Bouton Down Left reconnu")
            return jsonify({"message": "Bouton Down Left reconnu"})
        elif button_value == 'S':
            print("Bouton Stop reconnu")
            return jsonify({"message": "Bouton Stop reconnu"})

    return render_template("/interface_novapro.html")

功能说明

1. 按钮点击事件：
2. 使用 jQuery 的 .click() 方法为每个按钮绑定事件。

3. 在点击时，获取按钮的值并通过 Ajax POST 请求发送到后端。

4. 发送数据：

5. 按钮的值被包装为 JSON 数据并发送到 Flask。

6. 后端处理：

7. Flask 使用 request.get_json() 提取请求体中的 JSON 数据。

8. 根据按钮的值执行相应的逻辑，并返回一个 JSON 响应。

9. 响应处理：

10. 前端在成功回调函数中捕获 Flask 返回的响应并显示消息。

运行结果

• 按钮被点击时，页面不会重新加载。
• 相关逻辑会在后台运行。
• 弹出消息框会显示服务器返回的结果（例如，”Bouton Up reconnu”）。

通过这种方式，您可以实现按钮点击与 Flask 后端函数的无刷新交互。