amp-form verify-xhr не работает - PullRequest
Новая
       9

amp-form verify-xhr не работает

0 голосов
/ 15 июня 2019

Я пытаюсь создать форму, используя amp-form с проверкой формы "verify-xhr". Я могу получить форму для отправки запроса на сервер, и сервер правильно отвечает с помощью объекта json. Проблема состоит в том, что ответ, кажется, не виден шаблоном amp-усов или ответом.

Объект 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>

1 Ответ

0 голосов
/ 16 июня 2019

, поскольку вы использовали метод 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>
...