amp-form verify-xhr似乎不工作

Question

我正在尝试使用amp-form构建一个带有表单验证"verify-xhr“的表单。我可以让表单向服务器发送请求，服务器使用json对象正确响应。问题是，amp-mustache模板或响应中似乎看不到响应。

响应的JSON对象：

{"message_success": "validation successful", "url":"example.com/category-some/"}

这个验证过程的机制是什么？页面元素和服务器之间的通信究竟是如何完成的

<form method="post" class="login-form" action-xhr="https://www.example.com/filter" verify-xhr="https://www.example.com/filter" on="verify:AMP.navigateTo(url=event.response.url);submit-success:AMP.navigateTo(url=event.response.url)">
<label for="brand" class="formlabel mb-1 ml-1">Category</label>
<select id="category" class="form-control" name="category">
    <option selected>Cat 1</option>
    <option>Cat 2</option>
    <option>Cat 3</option>
</select>

<input type="submit" class="btn btn-success">

<div submit-success>
    <template type="amp-mustache">Success {{ message_success }}</template>
</div>
<div submit-error>
    <template type="amp-mustache">Error {{ message_error }}</template>
</div>

​

Answer 1

因为您使用了AMP.navigateTo()方法，所以这个方法将用户重定向到另一个URL (这里是example.com/category-some/ )，简单地删除这些方法，如果提交后需要重定向到另一个页面，您应该创建另一个HTML页面来显示提交结果

​

<form method="post" class="login-form" action-xhr="https://www.example.com/filter">
<label for="brand" class="formlabel mb-1 ml-1">Category</label>
<select id="category" class="form-control" name="category">
    <option selected>Cat 1</option>
    <option>Cat 2</option>
    <option>Cat 3</option>
</select>

<input type="submit" class="btn btn-success">

<div submit-success>
    <template type="amp-mustache">Success {{ message_success }}</template>
</div>
<div submit-error>
    <template type="amp-mustache">Error {{ message_error }}</template>
</div>

​