AMP通讯表单响应问题 [英] AMP Newsletter Form Response Issue
问题描述
我正在尝试使用 参考链接 .提交表单后,在服务器端,我将使用以下代码来处理请求并返回响应:
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 :
服务器端脚本:
<?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>
请求完成后.它总是显示我的HTML表单模板的submit-success
部分.我的主要问题是如何用服务器端返回的name
来显示上述表格的submit-error
部分,以及如何在服务器端处理请求以使其分别显示success
或error
消息?
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?
推荐答案
感谢@SebastianBenz给我提示错误响应状态的提示,即 4XX 或 5XX .但是,我已阅读 放大器自 但我对错误响应下提到的 2XX 感到困惑. submit-success
将为状态为2XX(即200、201、201等)的所有响应呈现.
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 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脚本(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;
更新
替换下一行
header("Access-Control-Allow-Origin: *.ampproject.org");
使用
header("Access-Control-Allow-Origin: ". str_replace('.', '-','https://www.example.com') .".cdn.ampproject.org");
这篇关于AMP通讯表单响应问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!