表单提交重定向到带有AMP-HTML的新网址

问题描述 投票:1回答:2

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

我有一个简单的forminputsubmit button像这样:

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

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

例如,如果用户输入:"Hello"并提交表单,我想将他重定向到像"MY/STATIC/URL/Hello"这样的页面。

在放大器中有没有办法实现这个目的?

query-string amp-html
2个回答
1
投票

一种方法是在响应中设置AMP-Redirect-To标头(See AMP-form-redirection)。在表单提交上发送用户输入,然后从API端点生成所需的URL,并在对生成的URL的响应中设置AMP-Redirect-To标头。

另一种方法是使用navigateTo(url=STRING)动作(See AMP Actions & Events)进行表单提交事件。在这种情况下,您必须使用input-throttled等事件将值存储在状态输入中,然后在navigateTo url字符串中使用url替换来附加amp-state值。

保证第一种方法有效。第二种方法应该在理论上有效,但我无法弄清楚如何通过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,这应该可行。如果有帮助,请告诉我。


1
投票

最简单的方法是通过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

© www.soinside.com 2019 - 2024. All rights reserved.