Amp XHR表单页重定向

Question

我创建了amp表单。当我单击Butona时，我从不同的页面检查表单中的值。我在这里没有问题。如果所有的数据都是正确的，我想指向一个唯一的地址。当表单是肯定的时，我如何引导访问者？

 <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，重定向地址必须是绝对的，HTTPS URL，，否则AMP会抛出错误，重定向不会发生。希望它能有所帮助;)

Answer 2

必须使用：

header('AMP-Redirect-To: https://...');
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin, AMP-Redirect-To");

Answer 3

不是使用

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

使用

action="//example.com/control"

并让URL (//example.com/control)重定向用户