首页 > 解决方案 > 带有 URL 重定向的 AMP HTML/PHP 表单中的 POST 提交

问题描述

我有一个简单的 HTML/PHP 表单(例如https://example.com/dir/BOO.php),其中包含 3 个字段,我正在开发这些字段以与 AMP 兼容并且应该使用 POST 方法:

<form method="post" action-xhr="https://example.com/dir/BOO.php" target="_top">
  <input type="text" name="name" placeholder="Name..." value="Input Name" required>
  <span>Code:</span><select name="code" required><option value="" disabled selected>Choose Code</option><option value='YOYO'>YOYO</option><br><option value='BOO'>BOO</option><br><option value='HELLO'>HELLO</option></select>
  <span>Date:</span><select name="dt"><option value='2019-11-29'>Fri, 29Nov19</option><br><option value='2019-11-27'>Wed, 27Nov19</option><br><option value='2019-11-26'>Tue, 26Nov19</option><br><option value='2019-11-25'>Mon, 25Nov19</option><br><option value='2019-11-22'>Fri, 22Nov19</option><br></select>
  <input type="submit" value="Submit">

</form>

在同一个 BOO.php 中,我在页面顶部有以下 PHP 代码来处理值:

echo "Printing new form values:<br>";
if(!empty($_POST)){
    header("Access-Control-Allow-Credentials: true");
    header("Access-Control-Allow-Methods: Content-Type");
    header("Access-Control-Allow-Origin: ". str_replace('.', '-','https://example.com') .".cdn.ampproject.org");
    header("Access-Control-Allow-Source-Origin: https://www.example.com");
    header("AMP-Access-Control-Allow-Source-Origin: https://www.example.com");
    header("AMP-Access-Control-Allow-Methods: *");
    header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
    header('Access-Control-Allow-Headers', 'Content-Type');
    header("AMP-Redirect-To: https://example.com/dir/YOYO.php");

}

echo '{ "POST": "' . print_r($_POST, true) . '"}';
echo "FINISHED-Printing new form values:<br>";
?>

我正在努力实现以下目标:

1) BOO.php 和 YOYO.php 都具有与上面相同的 HTML 和 PHP 代码——它们应该是一个与 AMP 兼容的页面,我相信在上面的代码中已经处理过了。

2) 当我在浏览器中访问 ( https://example.com/dir/BOO.php ) 页面时,它应该具有 HTML 表单中设置的默认值。但是,当我选择/输入其他值时 - 比如在名称字段中插入我的名字,从下拉列表中选择代码“YOYO”,然后选择日期为“Wed, 27Nov19”,然后点击“提交”按钮,它应该带我到 ( https://example.com/dir/YOYO.php ) 页面,然后

3)应在 YOYO 页面中捕获所有选择/插入的值(这是我试图通过echo '{ "POST": "' . print_r($_POST, true) . '"}';代码打印的内容。

问题是,即使在第一个 BOO.php 页面上选择/插入值并点击提交按钮后,页面根本没有移动。

BOO 和 YOYO php 页面具有相同的代码来处理此表单值。

知道我哪里出错了吗?

并补充:我在标签中也有 AMP-FORM 的必要脚本异步:

<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.2.js"></script>
plus....<style amp-boilerplate>, etc...

谢谢

标签: phpformspostamp-html

解决方案


推荐阅读