Advanced Server Request
Introduction
This sample demonstrates how to display data from a server in an email and refresh it subsequently while taking the user's input into account.
Because AMP for Email doesn't allow binding to [src] in amp-list, it uses a combination of
amp-list and amp-form
that share the same amp-mustache template.
When the form is submitted for the first time, the amp-list is hidden and the form's response takes its place.
Implementation
Define a template and give it an id to allow it to be used from both amp-list and amp-form.
This displays data sent from a server.
{{#animal}}You have selected {{animal}}.
{{/animal}}<template id="animal-template" type="amp-mustache">
<p>This displays data sent from a server.</p>
{{#animal}}
<p>You have selected {{animal}}.</p>
{{/animal}}
</template>
When the user changes the selection, the change event triggers the form submission and hides the amp-list: on="change:animal-form.submit,animal-list.hide".
The amp-form renders the server response using the same template as amp-list, making the switch from amp-list to amp-form appear seamless.
<form id="animal-form" method="post" action-xhr="https://amp.dev/documentation/examples/api/echo">
<div>
<p>Select an animal to update the server response.</p>
<select name="animal" on="change:animal-form.submit,animal-list.hide">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="parrot">Parrot</option>
</select>
</div>
<div submitting>Loading ...</div>
<div submit-success template="animal-template"></div>
</form>
<amp-list id="animal-list" max-items="1" template="animal-template" src="/static/inline-examples/data/amp-list-animals.json" layout="fixed-height" height="85">
<div placeholder>Loading ...</div>
</amp-list>
このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。
Stack Overflow にアクセスする 説明されていない機能ですか？AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。
GitHub でサンプルを編集する-