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

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

Potrzebujesz dodatkowych wyjaśnień?

Jeśli przedstawione tutaj wyjaśnienia nie odpowiadają na wszystkie pytania, skontaktuj się z innymi użytkownikami AMP, aby omówić daną przykładową realizację.

Przejdź do Stack Overflow

Niewyjaśniona funkcja?

Zdecydowanie zachęcamy do wzięcia udziału! Choć mamy nadzieję, że staniesz się stałym uczestnikiem naszej społeczności open source, to z wdzięcznością przyjmiemy również każdy jednorazowy wkład w kwestie, które są Twoją pasją.

Edytuj przykład na GitHub

Written by @fstanis