AMP FormのPOST送信でページ移動する方法

2019年2月17日

POST送信でページ移動する方法

AMP-FormでのPOST送信する際、action-xhrではなく通常のHTMLフォーム同様にactionでページ移動(ページ遷移)させたい場合があります

主に、パスワードなどのURLに含めたくない情報の送信やテキストエリアを用いたデータ送信でのページ移動で、GET送信はあまり使いたくないな、というパターンです

AMP FormのPOST送信でページ移動する方法①

送信元AMPページ

<form method="POST" action-xhr="送信先URL" target="_top">
<input type="submit" value="送信">
</form>

送信先ページ

//AMP-Access-Control-Allow-Source-Origin設定
header('AMP-Access-Control-Allow-Source-Origin:https://1-notes.com');

//AMP-Redirect-To設定
$redirect_url = '移動先URL';
header("AMP-Redirect-To: ".$redirect_url);
header("Access-Control-Expose-Headers: AMP-Redirect-To, AMP-Access-Control-Allow-Source-Origin");

header(‘AMP-Access-Control-Allow-Source-Origin:許可URL’)でXHRリクエスト(AJAXリクエスト)の可否を設定します

header(“AMP-Redirect-To: ‘移動先URL’)でリダイレクト先のURLを設定して、合わせてheader(“Access-Control-Expose-Headers: AMP-Redirect-To, AMP-Access-Control-Allow-Source-Origin”)を記述します

AMP FormのPOST送信でページ移動する方法②

テキストの入力を取得して、値が空でなければページ移動させるサンプルコードです

送信元AMPページ

<form method="POST" action-xhr="送信先URL" target="_top">
<input type="text" name="post_text" value="">
<input type="submit" value="送信">
<div submit-success>
<template type="amp-mustache">
<p>{{message}}</p>
</template>
</div>
</form>

送信先ページ

//AMP-Access-Control-Allow-Source-Origin設定
header('AMP-Access-Control-Allow-Source-Origin:https://1-notes.com');

if($post_text){
//json出力
echo '{"message": "成功!"}';

//AMP-Redirect-To設定
$redirect_url = '移動先URL';
header("AMP-Redirect-To: ".$redirect_url);
header("Access-Control-Expose-Headers: AMP-Redirect-To, AMP-Access-Control-Allow-Source-Origin");

}else{
//空値だった場合のjson出力
echo '{"message": "テキストが空です!"}';
}

<template type=”amp-mustache”>を利用して返り値のjsonから動的表示をするのにamp-formコンポーネントとは別にamp-mustacheコンポーネントの読み込みが必要となります

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