Question

我有一个简单的问题，但似乎无法在AMP中解决！

我有一个简单的form，其中有一个input和一个submit button，如下所示：

<form id="myform">
     <input type="text" id="srchInput"/>
     <button type="submit">Submit</button>
</form>

我想要的是能够在提交表单时将静态网址连接到输入值，并将页面重定向到结果。

例如，如果用户输入："Hello"并提交表单，我想将他重定向到"MY/STATIC/URL/Hello"之类的页面。

在放大器中有什么方法可以实现这一点？

Answer 1

一种方法是通过在响应（See AMP-form-redirection）中设置AMP-Redirect-To标头。发送用户有关表单提交的输入，然后从您的API端点生成所需的URL，并在对生成的URL的响应中设置AMP-Redirect-To标头。

另一种方法是对表单提交事件使用navigateTo(url=STRING)操作（See AMP Actions & Events）。在这种情况下，您必须使用input-throttled之类的事件将输入中的值存储到状态，然后在navigateTo url字符串中使用url替换来附加放大器状态值。

保证第一种方法有效。第二种方法在理论上应该可行，但是我无法弄清楚如何通过URL替换来获得AMP-STATE值。相同的代码应类似于：

<form id="myform" on="submit:AMP.navigateTo(url="MY/STATIC/URL/AMP_STATE(endValue)>")">

     <input type="text" id="srchInput" on="input-throttled:AMP.setState({ endValue : event.value })" />

     <button type="submit"> Submit </button>

</form>

如果您可以弄清楚如何用amp-state值代替url，则应该可以。让我知道是否有帮助。

Answer 2

最简单的方法是通过GET操作：

 <head>
  ...
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
 </head>
 <body>
 <form method="GET" action="MY/STATIC/URL" target="_top">
   <input type="text" id="srchInput" name="srcInput" value="test">
   <button type="submit">Submit</button>
 </form>
 </body>

表单提交将导航到/MY/STATIC/URL?srcInput=test。

表单使用AMP-HTML提交重定向到新的URL

2 个答案: