如何处理表单提交后返回的数据

Question

我有一个 AMP 表单，它在提交时调用 Web 服务，然后，我得到一个 JSON 作为结果。 JSON 包含数据，为了查看它们，我在 submit-success div 中使用 amp-mustache 模板。一切正常。我看到了我需要的所有数据。但我无法从 submit-success div 外部访问该数据。由于我需要在 submit-success div 之外的表单上设置一些控件，因此我需要在 submit-success div 之外访问 JSON 结果。谁能分享我该怎么做？

Answer 1

一种方法是将您的 JSON 响应保存到某个状态。您可以使用表单的 on 属性来设置事件 submit-success 的状态，如下所示：

<form id="form123" 
      action-xhr="/formHandle" 
      method="POST"
      on="submit-success:AMP.setState({ msg : event.response.message })"
>

现在您可以使用此状态通过 amp-bind 表达式在页面的任何位置实现您的控制逻辑。例如，

<p class="" [text]=" 'Response is :' + msg">

如果您只想执行隐藏、显示、切换手风琴、滚动、打开灯箱等常见操作，您可以通过在 on 属性中针对 submit-success 事件，而不必使用 amp-bind.

如何处理表单提交后返回的数据

How to work with data returned after form submit

amp-html