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一部が表示されます。私の主な質問は、nameの返信で上記のフォームのsubmit-error部分を表示する方法と、サーバー側で要求を処理して、それぞれsuccessまたはerrorメッセージを表示する方法は何ですか？

Answer 1

は私にエラー応答ステータスすなわち4XXまたは5XXためのヒントを与えるためにあなたの@SebastianBenzをありがとうございます。しかし、私はamp-fromを読んだが、私はエラー応答で述べた2XXで混乱していました。

AMP HTMLのFORM：

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

submit-success等2XXすなわち200、201、201のステータスを持つすべての応答のためにレンダリングします

ここで、次の

は私の完全な作業ニュースレターコードですPHP SCRIPT（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: ". str_replace('.', '-','https://www.example.com') .".cdn.ampproject.org"); 

Answer 2

submit-successとsubmit-error divは、サーバーレスポンスのステータスコードに基づいてレンダリングされます。エラー応答のため、ステータスコードが4XXまたは5XX範囲内にあることが必要です。