Advanced Server Request
- Introduction Implementation

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.

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

Use a placeholder to make the loading state look the same as the submitting state for the form.

Loading ...

This displays data sent from a server.

You have selected dog.

<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 プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub でサンプルを編集する

Written by @fstanis