Я пытаюсь внедрить форму подписки на бюллетень AMP, используя ссылку Ссылка . После отправки формы на стороне сервера я использую следующий код для обработки запроса и ответа на возврат:
Сценарий на стороне сервера:
<?php header("Content-type: application/json"); header("Access-Control-Allow-Credentials: true"); header("Access-Control-Allow-Origin: *.ampproject.org"); header("AMP-Access-Control-Allow-Source-Origin: https://www.example.com"); header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin"); $data = array('name'=>$_POST['name'],'email'=>$_POST['email']); echo json_encode($data);exit; ?> ФОРМАТ AMP HTML
<form method="post" class="p2" action-xhr="https://www.example.com/request.php" target="_top"> <div class="ampstart-input inline-block relative m0 p0 mb3"> <input type="text" class="block border-none p0 m0" name="name" placeholder="Name..." required> <input type="email" class="block border-none p0 m0" name="email" placeholder="Email..." required> </div> <input type="submit" value="Subscribe" class="ampstart-btn caps"> <div submit-success> <template type="amp-mustache"> Success! Thanks {{name}} for trying the <code>amp-form</code> demo! Try to insert the word "error" as a name input in the form to see how <code>amp-form</code> handles errors. </template> </div> <div submit-error> <template type="amp-mustache"> Error! Thanks {{name}} for trying the <code>amp-form</code> demo with an error response. </template> </div> </form>
Как только запрос будет завершен. Он всегда отображает часть submit-success моего шаблона формы HTML. Мой главный вопрос: Как показать часть submit-error выше формы с возвратом name со стороны сервера и как я обрабатываю запрос на стороне сервера, чтобы он мог отображать success сообщение или сообщение error соответственно?
submit-success submit-error отображаются на основе кода состояния ответа сервера. Для ответов об ошибках код состояния должен находиться в диапазоне 4XX или 5XX.
Спасибо @SebastianBenz за то, что вы дали мне подсказку об ошибке, например, 4XX или 5XX . Однако я прочитал amp-from, но меня смутило 2XX, упомянутое в разделе « Ответ на ошибку» . submit-success будет отображать для всех ответов, которые имеют статус 2XX, т.е. 200, 201, 201 и т. д.
Теперь следующий мой полный рабочий бюллетень:
AMP HTML FORM:
<form method="post" class="p2" action-xhr="https://www.example.com/request.php" target="_top"> <div class="ampstart-input inline-block relative m0 p0 mb3"> <input type="text" class="block border-none p0 m0" name="name" placeholder="Name..." required> <input type="email" class="block border-none p0 m0" name="email" placeholder="Email..." required> </div> <input type="submit" value="Subscribe" class="ampstart-btn caps"> <div submit-success> <template type="amp-mustache"> Success! Thanks {{name}} for trying the <code>amp-form</code> demo! Try to insert the word "error" as a name input in the form to see how <code>amp-form</code> handles errors. </template> </div> <div submit-error> <template type="amp-mustache"> Error! Thanks {{name}} for trying the <code>amp-form</code> demo with an error response. </template> </div> </form>
PHP SCRIPT (request.php):
<?php header("Content-type: application/json"); header("Access-Control-Allow-Credentials: true"); header("Access-Control-Allow-Origin: *.ampproject.org"); header("AMP-Access-Control-Allow-Source-Origin: https://www.example.com"); /* Return error if Posted name is sanchit or do your logic */ if($_POST['name'] == 'sanchit'){ /* Return Error*/ header("HTTP/1.0 412 Precondition Failed", true, 412); $data = array('name'=>$_POST['name'],'email'=>$_POST['email'],'msg'=>'Sorry '.$_POST['name'].'! cannot access this form.'); echo json_encode($data);exit; }else{ /* Return Success */ header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin"); $data = array('name'=>$_POST['name'],'email'=>$_POST['email']); echo json_encode($data);exit; } exit;
ОБНОВИТЬ
Заменить следующую строку
header("Access-Control-Allow-Origin: *.ampproject.org");
С
header("Access-Control-Allow-Origin: ". str_replace('.', '-','https://www.example.com') .".cdn.ampproject.org");