Question

我正在尝试使用带有形式验证“ verify-xhr”的amp-form构建形式。我能够获取将请求发送到服务器的表单，并且服务器使用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>

放大器形式验证XHR似乎不起作用

1 个答案: