進階伺服器請求

簡介

此範例示範如何在電子郵件中顯示來自伺服器的資料，並在考量使用者輸入的情況下隨後重新整理資料。

由於 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.dev.org.tw/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.org.tw/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