AMP表单中amp-mustache的<submit-error>无法展示自定义JSON错误消息怎么办？

问题分析 #

当前核心问题是后端返回的errorMessage无法在AMP表单的submit-error模板中展示，仅显示“Error:”。根源在于前端表单以JSON格式提交，但后端仍使用解析传统表单数据的方式读取参数，导致请求解析异常，进而影响错误消息的正常传递。

修复方案 #

1. 修正后端参数获取逻辑 #

前端表单设置了enctype="application/json"，提交的是JSON格式数据，Flask需要使用request.get_json()方法解析请求体，而非request.form.get（该方法仅适用于application/x-www-form-urlencoded或multipart/form-data格式）。

2. 调整后端响应代码 #

保持错误响应的JSON结构包含errorMessage字段，同时确保响应状态码为4xx类型（如406、400），Content-Type正确设置为application/json。

修改后的Flask接口代码：

from flask import Flask, request, Response, json

@app.route('/amp-register-email', methods=['POST'])
def register_email():
    # 解析JSON格式的请求体
    request_data = request.get_json()
    email = request_data.get("email", None)
    
    # 测试用错误响应
    response_dict = {"errorMessage": "Die eingegebene E-Mail-Adresse ist bereits registriert."}
    response = Response(
        response=json.dumps(response_dict),
        mimetype="application/json",
        status=406
    )
    return response

3. 前端代码无需修改 #

你的前端submit-error模板写法正确，无需调整：

<div submit-error>
    <template type="amp-mustache">
        Error: {{ errorMessage }}
    </template>
</div>

只要后端返回正确的JSON数据，{{ errorMessage }}会自动渲染对应内容。

额外提示 #

• 如果不需要JSON格式提交表单，可以移除前端的enctype="application/json"属性，此时后端用request.form.get("email")即可正常获取参数，但JSON格式更符合现代API设计规范。
• 确保Flask应用的JSONIFY_MIMETYPE配置为application/json（默认已启用），避免响应类型不匹配导致的渲染问题。

内容的提问来源于stack exchange，提问作者toom