Amp XHR表格頁重定向

Question

我創建了amp表單。 當我點擊Butona時，我從不同的頁面檢查表單中的值。 我在這裏沒有問題。 如果所有的數據都是正確的，我想指示一個獨特的adrese。 如果表單是正面的，我該如何指導訪問者？

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> 
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script> 

<form method="POST" action-xhr="//example.com/control" target="_top"> 
<input type="checkbox" name="items[]" value="1" /> 
<input type="checkbox" name="items[]" value="2" /> 
<input type="checkbox" name="items[]" value="3" /> 
... 
<button type="submit" class="btn">Check and go</button> 
<div submit-success> 
    <template type="amp-mustache"> 
     {{message}} 
    </template> 
</div> 
<div submit-error> 
    <template type="amp-mustache"> 
     {{message}} 
    </template> 
</div> 
</form> 

我在變量message中顯示Json的請求。 我想轉發一個不同的地址，而不是顯示最後一條消息。 AMP可以嗎？

Answer 1

如果您正在使用PHP在後端控制XHR形式提交的值，那麼你可以簡單地按照這樣的：

if(!empty($_POST)){ 

    //--YOUR OTHER CODING-- 
    //........... 

    $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]"; 
    $redirect_url = 'https://example.com/forms/thank-you/'; //-->MUST BE 'https://'; 

    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: ".$domain_url); 

    if(isEmailAlreadyExist($_POST['email'])){ //-->SAMPLE Valiation! 
     //-->Any 40X status code! 
     //Reference-1: https://github.com/ampproject/amphtml/issues/6058 
     //Reference-2: http://php.net/manual/pt_BR/function.http-response-code.php 
     header("HTTP/1.0 412 Precondition Failed", true, 412); 
     echo json_encode(array('errmsg'=>'This email already exist!')); 
     die(); 
    }else{ 
     //--Assuming all validations are good here-- 
     if(empty($redirect_url)){ 
      header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin"); 
     }else{ 
      header("AMP-Redirect-To: ".$redirect_url); 
      header("Access-Control-Expose-Headers: AMP-Redirect-To, AMP-Access-Control-Allow-Source-Origin"); 
     } 
     echo json_encode(array('successmsg'=>'My success message. [It will be displayed shortly(!) if with redirect]')); 
     die(); 
    } 
} 

有一個limitation的重定向URL必須是絕對HTTPS URL否則AMP將引發錯誤並重定向不會發生。 希望這將幫助;）

Answer 2

而不是使用

action-xhr="//example.com/control" 

使用

action="//example.com/control" 

，並讓URL（//example.com/control）將用戶重定向