高级服务器请求

简介

此示例演示如何在电子邮件中显示来自服务器的数据，并在考虑用户输入的情况下随后刷新数据。

由于 AMP for Email 不允许绑定到 amp-list 中的 [src]，它使用了 amp-list 和 amp-form 的组合，它们共享同一个 amp-mustache 模板。当首次提交表单时，amp-list 将被隐藏，表单的响应将取而代之。

实现

定义一个模板并为其提供一个 id，以便可以从 amp-list 和 amp-form 中使用它。

<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>

当用户更改选择时，更改事件会触发表单提交并隐藏 amp-list：on="change:animal-form.submit,animal-list.hide"。

amp-form 使用与 amp-list 相同的模板呈现服务器响应，使从 amp-list 到 amp-form 的切换看起来无缝。

使用占位符使加载状态看起来与表单的提交状态相同。

正在加载...

<form id="animal-form" method="post" action-xhr="https://amp.org.cn/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.org.cn/static/inline-examples/data/amp-list-animals.json" layout="fixed-height" height="85">
  <div placeholder>Loading ...</div>
</amp-list>

需要进一步解释？

如果此页面上的说明没有涵盖您的所有问题，请随时与其他 AMP 用户联系，讨论您的具体用例。

前往 Stack Overflow

一个无法解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但我们也欢迎您为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

作者： @fstanis