AMP 时事通讯表格回复问题
[英] AMP Newsletter Form Response Issue
本文介绍了AMP 时事通讯表格回复问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 参考链接.提交表单后，在服务器端我使用以下代码来处理请求并返回响应:
服务器端脚本:
$_POST['name'],'email'=>$_POST['email']);回声 json_encode($data);exit;?>
AMP 表单 HTML
<输入类型=提交"值=订阅"class="ampstart-btn caps"><div 提交成功><模板类型="amp-mustache">成功！感谢 {{name}} 尝试<code>amp-form</code>演示！尝试在表单中插入单词error"作为名称输入，看看如何<code>amp-form</code>处理错误.
<div 提交错误><模板类型="amp-mustache">错误！感谢 {{name}} 尝试<code>amp-form</code>带有错误响应的演示.
</表单>
一旦请求完成.它总是显示我的 HTML 表单模板的 submit-success 部分.我的主要问题是如何使用 name 从服务器端返回上述表单的 submit-error 部分，以及如何在服务器端处理请求以便它可以显示success 或 error 消息分别是什么?
解决方案
感谢 @SebastianBenz 给我提示错误响应状态，即 4XX 或 5XX.但是我已经阅读了 amp-from但我对错误响应下提到的2XX感到困惑.submit-success 将呈现状态为 2XX 的所有响应，即 200、201、201 等.
现在以下是我完整的工作时事通讯代码:
AMP HTML 表单:
<输入类型=提交"值=订阅"class="ampstart-btn caps"><div 提交成功><模板类型="amp-mustache">成功！感谢 {{name}} 尝试<code>amp-form</code>演示！尝试在表单中插入单词error"作为名称输入，看看如何<code>amp-form</code>处理错误.
<div 提交错误><模板类型="amp-mustache">错误！感谢 {{name}} 尝试<code>amp-form</code>带有错误响应的演示.
</表单>
PHP 脚本(request.php):
$_POST['name'],'email'=>$_POST['email']);回声 json_encode($data);exit;}出口;
更新
替换以下行
header("Access-Control-Allow-Origin: *.ampproject.org");
与
header("Access-Control-Allow-Origin: ".str_replace('.', '-','https://www.example.com') .".cdn.ampproject.org");
I am trying to implement AMP newsletter subscription form using Reference Link. Once form is submitted, on the server side I use following code to handle the request and return response :
Server Side Script :
<?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>
Once request is completed. It always display the submit-success part of my HTML form template. My main question is How do I show submit-error part of above form with name return from server side and how do I handle the request in server side so that it can display success or error message respectively?
解决方案
Thank you @SebastianBenz for giving me a hint for error response status i.e 4XX or 5XX. However I have read amp-from but I was confused with 2XX mentioned under Error Response. submit-success will render for all responses that has a status of 2XX i.e 200, 201, 201 etc.
Now following is my complete working newsletter code :
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>
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;
UPDATE
Replace following line
header("Access-Control-Allow-Origin: *.ampproject.org");
With
header("Access-Control-Allow-Origin: ". str_replace('.', '-','https://www.example.com') .".cdn.ampproject.org");
这篇关于AMP 时事通讯表格回复问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
