進階伺服器請求

簡介

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

因為 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 撰寫