AMP 两个表单数据的传递——表单1返回数据传到表单2

274 阅读1分钟
<form action-xhr="https://test.domain.com/contact/image/upload/" method="POST"  id="file-form" enctype='multipart/form-data'
      class="form contact" on="submit-success: AMP.setState({ myItems: myItems.concat([event.response])})">
...

</form>
<form  class="form contact"
      action-xhr="https://test.domain.com/otherAction/"
      id="contact-form"
      method="post">

.....

<amp-state id="myItems">
    <script type="application/json">
        []
    </script>
</amp-state>
<amp-list layout="fixed-height" height="0" [src]="myItems" [height]="myItems.length * 40" items="." binding="no">
    <template type="amp-mustache">
         Item{{file}}:title: {{name}} ——file_size:{{text_file_size}}
        <li>
            <input type="hidden" name="attachment[{{file}}][name]"  value="{{name}}"/>
            <input type="hidden" name="attachment[{{file}}][file]"  value="{{text_file_size}}"/>

        </li>
    </template>
</amp-list>
</form>

在使用AMP对项目页面进行AMP化的过程中,出现需要两个Form表单之间传递数据的情况。

如,用户在一个页面,及需要传递文件,又需要传递文字信息,同时,文件每次选择后,都要打印出来对应的信息,那么这个直接使用一个form表单我没找到方法处理,所以我将这两个部分分离开,一部分传递文件,一部分传递文字信息及文件信息。

这里表单1的返回JSON我的是{{'file':'1','name':'file_1_Name','text_file_size':'file_1_Size'},{'file':'2','name':'file_2_Name','text_file_size':'file_2_Size'}}

同理,如果要将一个表单提交后返回的信息进行展示,除了form表单支持的submit-success/submit-error这些外,也可以用上述类似方法。这样就可以将表单返回的信息展示在页面的任意位置了。 例子如下:

<amp-state id="getResponse" class="i-amphtml-element i-amphtml-layout-container i-amphtml-built" i-amphtml-layout="container" hidden="" aria-hidden="true">
    <script type="application/json">
        {
            "success":"",
            "message":""
        }
    </script>
</amp-state>
<li class="message" [class]="getResponse.success" style="list-style: none;">
    <span [text]="getResponse.message"></span>
</li>
<form action-xhr="https://test.kyoye.com/myAction/" method="post" on="submit-success: AMP.setState({getResponse:{success:'message '+event.response.success,message:event.response.message}})" novalidate="">
                                        ...
</form>