求助：AMP Form提交成功消息不显示，错误消息正常显示

嘿，我完全懂你这种困惑——error提示能正常出来，偏偏success死活不显示，确实挺闹心的。咱们从AMP表单的核心要求入手，一步步排查：

1. 先检查PHP后端的响应格式（最常见的坑） #

AMP对submit-success的响应有严格要求：

• 必须返回合法的JSON格式，且响应头要设置Content-Type: application/json
• 要包含AMP能识别的成功标识，比如{"success": true}，如果模板里有变量（比如{{message}}），也要同步返回对应字段
• 绝对不能输出多余内容（比如PHP的警告、空格、HTML代码），这些会直接破坏JSON结构

举个正确的PHP返回示例：

// 先设置必要的响应头
header("Access-Control-Allow-Origin: *");
header("AMP-Access-Control-Allow-Source-Origin: https://your-domain.com"); // 替换成你的域名
header("Content-Type: application/json");

// 构建响应内容
$response = [
    "success" => true,
    "message" => "Thanks for your submission!"
];

echo json_encode($response);
exit; // 确保后续没有多余输出

2. 确认submit-success的DOM结构是否正确 #

你的代码片段里的<div submit-success>要满足两个条件：

• 必须是<amp-form>标签的直接子元素
• 内部的<template>必须指定type="amp-mustache"

完整的正确结构参考：

<form method="POST" action-xhr="/your-submit-endpoint.php" target="_top">
  <!-- 你的表单字段 -->
  <input type="text" name="name" required>
  
  <div><button type="submit" class="form-button-class">send</button></div>
  
  <!-- 成功提示区域 -->
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks for your submission, {{name}}!
    </template>
  </div>
  
  <!-- 错误提示区域 -->
  <div submit-error>
    <template type="amp-mustache">
      Oops! Something went wrong: {{error}}
    </template>
  </div>
</form>

3. 检查CORS相关的响应头（容易忽略的点） #

AMP的XHR请求有特殊的CORS要求，你的PHP后端必须返回：

• Access-Control-Allow-Origin: *（或者指定你的域名）
• AMP-Access-Control-Allow-Source-Origin: 你的域名（比如https://example.com，这个是AMP强制要求的，没有的话成功响应会被拦截）

4. 用浏览器控制台找线索 #

打开开发者工具（F12）的Console标签，提交表单后看看有没有报错：

• 如果是JSON.parse相关错误，说明你的PHP返回的JSON不合法
• 如果是CORS错误，说明响应头没设置对
• 如果是模板变量缺失，会提示某个变量未定义

这些错误信息能帮你快速定位问题根源。

5. 验证模板变量和JSON的匹配度 #

如果你的mustache模板里用了变量（比如{{name}}），那PHP返回的JSON里必须包含对应的键（比如"name": "Benjamin"），否则AMP可能不会渲染成功模板。

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