AMP 时事通讯表单响应问题

Question

我正在尝试使用 Reference Link 实施 AMP 通讯订阅表单。提交表单后，在服务器端我使用以下代码处理请求并返回响应：

服务器端脚本：

<?php 
header("Content-type: application/json");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: *.ampproject.org");
header("AMP-Access-Control-Allow-Source-Origin: https://www.example.com");
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
$data = array('name'=>$_POST['name'],'email'=>$_POST['email']);
echo json_encode($data);exit;   
?>

AMP 表单 HTML

<form method="post"
  class="p2"
  action-xhr="https://www.example.com/request.php"
  target="_top">
  <div class="ampstart-input inline-block relative m0 p0 mb3">
    <input type="text"
      class="block border-none p0 m0"
      name="name"
      placeholder="Name..."
      required>
    <input type="email"
      class="block border-none p0 m0"
      name="email"
      placeholder="Email..."
      required>
  </div>
  <input type="submit"
    value="Subscribe"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks {{name}} for trying the
      <code>amp-form</code> demo! Try to insert the word "error" as a name input in the form to see how
      <code>amp-form</code> handles errors.
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error! Thanks {{name}} for trying the
      <code>amp-form</code> demo with an error response.
    </template>
  </div>
</form>

请求完成后。它总是显示我的 HTML 表单模板的 submit-success 部分。我的主要问题是如何显示submit-error 从服务器端返回的name 上述表单的一部分以及如何处理服务器端的请求，以便它可以分别显示success 或error 消息？

Answer 1

submit-success 和 submit-error div 是根据服务器响应的状态代码呈现的。对于错误响应，状态码需要在 4XX 或 5XX 范围内。

Answer 2

感谢 @SebastianBenz 给我提示错误响应状态，即 4XX 或 5XX。但是我读过amp-from，但我对错误响应下提到的2XX感到困惑。 submit-success 将呈现所有状态为 2XX 的响应，即 200、201、201 等。

下面是我完整的工作通讯代码：

AMP HTML 表单：

<form method="post"
  class="p2"
  action-xhr="https://www.example.com/request.php"
  target="_top">
  <div class="ampstart-input inline-block relative m0 p0 mb3">
    <input type="text"
      class="block border-none p0 m0"
      name="name"
      placeholder="Name..."
      required>
    <input type="email"
      class="block border-none p0 m0"
      name="email"
      placeholder="Email..."
      required>
  </div>
  <input type="submit"
    value="Subscribe"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks {{name}} for trying the
      <code>amp-form</code> demo! Try to insert the word "error" as a name input in the form to see how
      <code>amp-form</code> handles errors.
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error! Thanks {{name}} for trying the
      <code>amp-form</code> demo with an error response.
    </template>
  </div>
</form>

PHP 脚本（request.php）：

<?php 
header("Content-type: application/json");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: *.ampproject.org");
header("AMP-Access-Control-Allow-Source-Origin: https://www.example.com");
/* Return error if Posted name is sanchit or do your logic */ 
if($_POST['name'] == 'sanchit'){
    /* Return Error*/   
    header("HTTP/1.0 412 Precondition Failed", true, 412);
    $data = array('name'=>$_POST['name'],'email'=>$_POST['email'],'msg'=>'Sorry '.$_POST['name'].'! cannot access this form.');
    echo json_encode($data);exit;
}else{
    /* Return Success */
    header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
    $data = array('name'=>$_POST['name'],'email'=>$_POST['email']);
    echo json_encode($data);exit;   
}
exit;

更新

替换下一行

header("Access-Control-Allow-Origin: *.ampproject.org");

与

header("Access-Control-Allow-Origin: ". str_replace('.', '-','https://www.example.com') .".cdn.ampproject.org");