时间戳

首页 > 解决方案 > 表单提交重定向到带有 AMP-HTML 的新网址

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

问题描述

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

我有一个简单form的input和submit button这样的：

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

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

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

有没有办法在amp中实现这一点？

标签： query-stringamp-html

解决方案

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

另一种方法是对表单提交事件使用navigateTo(url=STRING)操作（请参阅 AMP 操作和事件）。在这种情况下，您必须使用类似的事件将输入中的值存储到状态input-throttled，然后在navigateTourl 字符串中使用 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，这应该可以工作。让我知道它是否有帮助。

推荐阅读