AMP表单提交重定向或响应 [英] AMP Form submission redirect or response
问题描述
早上好，
我在测试AMP页面上有一个表单（AMP验证），表单工作正常：我收到带有结果的电子邮件（我使用php来处理它）。
我不知道（我做了一些尝试，但我想我仍然错过了一个例子）让AMP页面正确响应的语法（现在我得到订阅失败！但我收到了电子邮件）或重定向提交后。
在这里举个例子：
Good morning, I have a form on a test AMP page (is AMP validate) and the form works: I receive the email with result (I use a php to handle it). I don't know (I did some try but I think I still missing an example) the syntax for let the AMP page responce correctly (now I get "Subscription failed!" but I do get the email) or redirect after submission. Here my example:
AMP带表格的页面（我在提交后收到表格结果，但我不知道如何重定向或获得订阅成功！消息）
AMP page with form (I receive form result after submission but I don't know how to redirect or get "Subscription successful!" message)
带表单的非AMP页面（我收到表单结果并正确重定向）
Non AMP page with form (I receive form result and it redirect correctly)
action-xhr文件目标代码：
php的代码在这里以txt格式（处理表单结果的文件）
action-xhr file destination code: Code of the php here in txt format (the file that handle the form result)
任何示例对我来说也仅仅是重定向。
谢谢
Any example will be great for me also only about redirect. Thank you
推荐答案
您可以在成功提交后重定向用户，但只能在提交值时才能完成到一个安全的URL （如https://www.example.com）。
You can redirect user after successful submission, however it can only be done if you are submitting values to a secure URL (like https://www.example.com).
使用AMP表单的HTML
HTML With AMP-Form
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<form target="_top" action-xhr="https://test.php" method="post" name="test">
<input type="text" name="name" value="ABRA KA DABRA!">
<input type="submit"/>
</form>
</body>
</html>
提交PHP请求处理代码
SUBMISSION REQUEST HANDLER CODE IN PHP
<?php
if(!empty($_POST))
{
$name = $_POST['name'];
/*/ this is the email we get from visitors*/
$domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]";
$redirect_url = 'https://example.com/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);
/*/ For Sending Error Use this code /*/
if(!mail("email@example.com" , "Test submission" , "email: $name <br/> name: $name" , "From: $name\n ")){
header("HTTP/1.0 412 Precondition Failed", true, 412);
echo json_encode(array('errmsg'=>'There is some error while sending email!'));
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'=>$_POST['name'].'My success message. [It will be displayed shortly(!) if with redirect]'));
die();
}
}?>
这篇关于AMP表单提交重定向或响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
