AMP 表单通过帖子提交 [英] AMP form submitting with post

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

问题描述

多年来我一直有一个网站，其中包含一些用于登录的表单等.最近我将所有内容都用于 Google 的 AMP 证明，但表单停止工作.我现在正在寻找几天，但我找不到正确的答案.

首先，我包含了所有必要的脚本和代码，就像在此页面上一样.之后，出现了第一个错误:表单提交失败:响应必须包含 AMP-Access-Control-Allow-Source-Origin 标头 ".

然后我在页面上添加了标题.之后，第一个错误消失了，但出现了第二个错误:表单提交失败::意外的令牌<在位置0的JSON中".我已阅读此处 关于这个，但它对我来说没有真正的解决方案.

在这个阶段我被卡住了，我认为我在使用这样一个简单的表格时走错了路.我只是想回显输入...你能帮我吗?

亲切的问候，

帕特里克

 <!doctype html><html ><头><meta charset="utf-8"><script async src="https://cdn.ampproject.org/v0.js"></script><脚本异步自定义元素="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><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><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><link rel="canonical" href="https://www.domain.com/test.php"/><title>AMP表单</title><身体><?phpif(isset($_POST['submitlogin'])){$name = $_POST['name'];回声 $name;?><form method="post" action-xhr="#" target="_top">名称:<input type="text" name="name"/><input type="submit" name="submitlogin" value="Submit"/></表单>

解决方案

简单地说:你不能只回显输入.

来自文档:

<块引用>

使用 action-xhr 属性通过 XMLHttpRequest (XHR) 提交表单.您可以使用 amp-mustache 模板来显示自定义成功或错误消息，使用服务器端点作为 JSON 发送的数据.比如服务端发送{"foo":"bar"}，可以在模板中使用{{foo}}来渲染bar.

因此，由于您使用的是 action-xhr，您应该返回一个 JSON，并相应地更新表单模板.

查看这个.

完整示例，来自您的代码:

$name];header("内容类型:应用程序/json");header("访问控制-允许-凭据:真");header("Access-Control-Allow-Origin: *.ampproject.org");header("AMP-Access-Control-Allow-Source-Origin: https://www.domain.com");header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");回声 json_encode($output);死();}?><!doctype html><html ><头><meta charset="utf-8"><script async src="https://cdn.ampproject.org/v0.js"></script><脚本异步自定义元素="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><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><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><link rel="canonical" href="https://www.domain.com/test.php"/><title>AMP表单</title><身体><form method="post" action-xhr="#" target="_top">名称:<input type="text" name="name"/><input type="submit" name="submitlogin" value="Submit"/></表单><div 提交成功><模板类型="amp-mustache">成功！感谢您尝试<code>amp-form</code>演示！提交的名字是{{name}}

I've a website for years with a few forms to login etc. Recently I made it all Google's AMP proof, but the forms stopped working. I'm searching for days now, but I can't find the right answer.

First I included all the necessary scripts and code, just like on this page. After that, the first error came up: "Form submission failed:: Response must contain the AMP-Access-Control-Allow-Source-Origin header​​​".

Then I added headers to the page. After that, the first error is gone, but the second error appears: "Form submission failed:: Unexpected token < in JSON at position 0". I've read here about this, but it contains no real solution for me.

At this stage I'm stuck and I think I'm on the wrong path with such a simple form like this. I simply want to echo the input... Can you please help me?

Kind regards,

Patrick

    <?php 
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: *.ampproject.org");
header("AMP-Access-Control-Allow-Source-Origin: https://www.domain.com");
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
?>
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<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>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="canonical" href="https://www.domain.com/test.php"/>
<title>AMP form</title>
</head>
<body>
<?php
if(isset($_POST['submitlogin']))
{
$name = $_POST['name'];
echo $name;
} ?>
<form method="post" action-xhr="#" target="_top">
Name:<input type="text" name="name" />
<input type="submit" name="submitlogin" value="Submit" />
</form>
</body>
</html>

解决方案

To put it simply: you can't just echo the input.

From the docs:

Use the action-xhr attribute to submit the form via XMLHttpRequest (XHR). You can use amp-mustache templates to show custom success or error messages, using data sent by the server endpoint as JSON. For example, if the server sends {"foo": "bar"}, you can use use {{foo}} in the template to render bar.

So since you are using the action-xhr, you should be returning a JSON, and update the form template accordingly.

Check out this.

Full example, from your code:

<?php
if(isset($_POST['submitlogin']))
{
    $name = isset($_POST['name']) ? $_POST['name'] : '' ;
    $output = [
            'name' => $name
    ];
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.domain.com");
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");

echo json_encode($output);
die();

}
?>
<!doctype html>
<html amp>
<head>
    <meta charset="utf-8">
    <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>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="canonical" href="https://www.domain.com/test.php"/>
    <title>AMP form</title>
</head>
<body>

<form method="post" action-xhr="#" target="_top">
    Name:<input type="text" name="name" />
    <input type="submit" name="submitlogin" value="Submit" />
</form>
<div submit-success>
    <template type="amp-mustache">
        Success! Thanks for trying the
        <code>amp-form</code> demo! The name submited was {{name}}
    </template>
</div>
</body>
</html>

这篇关于AMP 表单通过帖子提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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