我正在尝试实施AMP表单订阅简报。 因此,在输入字段中写入电子邮件地址,将其发送到同一页面,进行分析并输入数据库。
一旦操作成功,应该返回 相反,它返回。 但是操作与数据库相关,成功并且用户成功订阅。
请在下面的脚本中。我省略了与数据库输入相关的代码
<?php
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin:".$_SERVER['HTTP_ORIGIN']);
header("AMP-Access-Control-Allow-Source-Origin: https://".$_SERVER['HTTP_HOST']);
header("Content-type: application/json");
header("access-control-allow-methods:POST, GET, OPTIONS");
header("access-control-allow-headers:Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token");
if(!empty($_POST['email'])){
// SUCCESSFUL
// ENTER DATA INTO DATABASE
...
...
// SEND THE RESPONSE
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
$email = isset($_POST['email']) ? $_POST['email'] : '';
$output = ['email' => $email];
echo $post_string=json_encode($output);
exit;
} else {
// FAIL
header("HTTP/1.0 412 Precondition Failed", true, 412);
$output = ['msg'=>'the filed email is empty'];
echo $post_string=json_encode($output);
exit;
}
?>
拜托,这里是HTML方面
<!DOCTYPE html>
<html amp lang="en">
<head>
...
...
<script async src="https://cdn.ampproject.org/v0.js"></script>
<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>
</head>
<body>
<form method="post" action-xhr="<? echo $_SERVER['HTTP_ORIGIN']; ?>/test.php" target="_top">
<fieldset>
<label>
<span>Email:</span>
<input type="email" name="email" required>
</label>
<input type="submit" value="Subscribe">
</fieldset>
<div submit-success>
<template type="amp-mustache">
Subscription successful!
check {{email}}
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Subscription failed!
</template>
</div>
</form>
</body>
</html>