AMP: Building Accelerated Mobile Pages

Handling XHR responses with <amp-mustache>

Now we come to a neat trick in AMP. We can use amp-mustache templates to parse the form response and automatically populate and display a success or error message as appropriate.

amp-mustache is an AMP implementation of the Mustache template syntax. You can find out more about mustache.js at github.com/janl/mustache.js.

To set this up, we need to do the following:

1. Add submit-success and submit-error attributes to any direct child elements of the form element.
2. Add a <template type="amp-mustache">...</template> element to display the success or error templates.

So our form will look like this:

<form method="post" action-xhr="/ch6/signup-xhr.php" target="_top">  ...  <div submit-success>    <template type="amp-mustache"> ...