我有一个简单的问题,但在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-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,这应该可行。如果有帮助,请告诉我。
最简单的方法是通过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
。