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 FORM 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

謝謝@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; 

UPDATE

替換以下行

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

隨着

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

Answer 2

submit-success和submit-error div是基於服務器響應的狀態碼呈現的。對於錯誤響應，狀態碼需要位於4XX或5XX範圍內。