Question

我正在尝试实施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>

AMP FORM：返回始终提交错误

0 个答案: