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="https://amp.dev/static/inline-examples/data/amp-list-animals.json" layout="fixed-height" height="85"> <div placeholder>Loading ...</div> </amp-list> 如果此页面上的说明未能涵盖您的所有问题，欢迎与其他 AMP 用户取得联系，讨论您的具体用例。
前往 Stack Overflow 一项无法解释的功能？AMP 项目强烈鼓励您参与并做出贡献！我们希望您能成为我们开放源代码社区的持续参与者，但我们也欢迎您对所热衷问题做出一次性贡献。
编辑 GitHub 上的示例-