AMP 表单提交重定向或响应 [英] AMP Form submission redirect or response

查看：21
本文介绍了AMP 表单提交重定向或响应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

早上好，我在测试 AMP 页面上有一个表单(是 AMP 验证)并且该表单有效:我收到带有结果的电子邮件(我使用 php 来处理它).我不知道(我做了一些尝试，但我认为我仍然缺少一个示例)让 AMP 页面正确响应的语法(现在我收到订阅失败！"但我确实收到了电子邮件)或在提交后重定向.这是我的例子:

带有表单的AMP页面(提交后收到表单结果，但我不知道如何重定向或获取订阅成功！"消息)

带有表单的非 AMP 页面(我收到表单结果并正确重定向)

action-xhr 文件目标代码:此处为txt格式的php代码(处理表单结果的文件)

任何示例都对我有用，也仅适用于重定向.谢谢

解决方案

您可以在成功提交后重定向用户，但是只有将值提交到安全 URL (例如 https://www.example.com).

带有 AMP 表单的 HTML

<html amp lang="zh-cn"><头><meta charset="utf-8"><script async src="https://cdn.ampproject.org/v0.js"></script><title>你好，AMP</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"><脚本类型=应用程序/ld+json">{"@context": "http://schema.org","@type": "新闻文章","headline": "发布内容的开源框架","datePublished": "2015-10-07T12:02:41Z",图片": [标志.jpg"]}<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{从{visibility:hidden}到{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}到{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><脚本异步自定义元素="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script><身体><h1>你好世界！</h1><form target="_top" action-xhr="https://test.php" method="post" name="test"><input type="text" name="name" value="ABRA KA DABRA!"><输入类型=提交"/></表单>

PHP 中的提交请求处理程序代码

 必须是 'https://';*/header("内容类型:应用程序/json");header("访问控制-允许-凭据:真");header("Access-Control-Allow-Origin: *.ampproject.org");header("AMP-Access-Control-Allow-Source-Origin:".$domain_url);/*/对于发送错误使用此代码/*/if(!mail("email@example.com" , "测试提交" , "email: $name <br/> name: $name" , "From: $name
 ")){header("HTTP/1.0 412 Precondition Failed", true, 412);echo json_encode(array('errmsg'=>'发送邮件时出现错误！'));死();}别的{/*/--假设这里所有的验证都很好--*/如果(空($redirect_url)){header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");}别的{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'].'我的成功信息.[它会很快显示(!)如果有重定向]'));死();}}?>

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 page with form (I receive form result after submission but I don't know how to redirect or get "Subscription successful!" message)

Non AMP page with form (I receive form result and it redirect correctly)

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

解决方案

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).

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>

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
 ")){
        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屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆